Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.2

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.2

post-carousel / src / blocks / shared / styleTab.js

styleTab.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.2, at src/blocks/shared/styleTab.js

4,087 lines 104.0 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { Fragment, useState } from "@wordpress/element";
3	import {
4	SPRangeControl,
5	SelectField,
6	Background,
7	Toggle,
8	BoxShadow,
9	Spacing,
10	Border,
11	SelectDropdown,
12	SpColorPicker,
13	TypographyNew,
14	Divider,
15	Popup,
16	} from "../../components";
17	import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon";
18	import SPToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl";
19	import { inArray } from "../../controls/controls";
20	import useDefaultValue from "../../hooks/useDefaultValue";
21	import {
22	HorizontalCenterIcon,
23	HorizontalLeftIcon,
24	HorizontalRightIcon,
25	VerticalBottomIcon,
26	VerticalCenterIcon,
27	VerticalTopIcon,
28	} from "../../icons/icons";
29
30	export const ImageStyleTab = ({ attributes, setAttributes }) => {
31	const {
32	imageHoverEffect,
33	imageBorder,
34	imageBorderWidth,
35	imageRadius,
36	imageSpace,
37	imageOpacityEffect,
38	imagePosition,
39	blockName,
40	imageGalleryNavArrowColor,
41	imageGalleryNavArrowBgColor,
42	imageGrayscaleLevel,
43	imageBlurEffect,
44	imageBrightness,
45	imageGrayscaleLevelHover,
46	imageBlurEffectHover,
47	imageBrightnessHover,
48	showImageGallery,
49	} = attributes;
50
51	const defaultValues = useDefaultValue(blockName);
52
53	const [imageNormaOrlHover, setImageNormaOrlHover] = useState("normal");
54	const [navArrowNormalOrHover, setNavArrowNormaOrlHover] = useState("color");
55
56	return (
57	<>
58	<SelectField
59	label={__("Hover Effect", "post-carousel")}
60	attributes={imageHoverEffect}
61	attributesKey={"imageHoverEffect"}
62	setAttributes={setAttributes}
63	items={[
64	{
65	label: "Select Hover Effect",
66	value: "",
67	disabled: "disabled",
68	},
69	{ label: "Normal", value: "normal" },
70	{ label: "Zoom In", value: "zoom-in" },
71	{ label: "Zoom Out", value: "zoom-out" },
72	{ label: "Slide Left", value: "slide-left" },
73	{ label: "Slide Right", value: "slide-right" },
74	{ label: "Rotate Left", value: "rotate-left" },
75	{ label: "Rotate Right", value: "rotate-right" },
76	{ label: "Opacity", value: "opacity" },
77	]}
78	/>
79	{imageHoverEffect === "opacity" && (
80	<SPRangeControl
81	label={__("Opacity Value", "post-carousel")}
82	attributes={imageOpacityEffect}
83	attributesKey={"imageOpacityEffect"}
84	setAttributes={setAttributes}
85	min={0}
86	max={1}
87	step={0.1}
88	/>
89	)}
90	<SPToggleGroupControl
91	attributes={imageNormaOrlHover}
92	onClick={(newValue) => setImageNormaOrlHover(newValue)}
93	items={[
94	{ label: "Normal", value: "normal" },
95	{ label: "Hover", value: "hover" },
96	]}
97	/>
98	{imageNormaOrlHover === "normal" && (
99	<>
100	<SPRangeControl
101	label={__("Grayscale Level", "post-carousel")}
102	attributes={imageGrayscaleLevel}
103	attributesKey={"imageGrayscaleLevel"}
104	setAttributes={setAttributes}
105	// units={["%"]}
106	defaultValue={{ unit: "%", value: 0 }}
107	max={100}
108	/>
109	<SPRangeControl
110	label={__("Blur Effect", "post-carousel")}
111	attributes={imageBlurEffect}
112	attributesKey={"imageBlurEffect"}
113	setAttributes={setAttributes}
114	// units={["px"]}
115	defaultValue={{ unit: "px", value: 0 }}
116	max={20}
117	step={0.5}
118	/>
119	<SPRangeControl
120	label={__("Brightness", "post-carousel")}
121	attributes={imageBrightness}
122	attributesKey={"imageBrightness"}
123	setAttributes={setAttributes}
124	max={10}
125	step={0.1}
126	defaultValue={1}
127	/>
128	</>
129	)}
130	{imageNormaOrlHover === "hover" && (
131	<>
132	<SPRangeControl
133	label={__("Grayscale Level", "post-carousel")}
134	attributes={imageGrayscaleLevelHover}
135	attributesKey={"imageGrayscaleLevelHover"}
136	setAttributes={setAttributes}
137	// units={["%"]}
138	defaultValue={{ unit: "%", value: 0 }}
139	max={100}
140	/>
141	<SPRangeControl
142	label={__("Blur Effect", "post-carousel")}
143	attributes={imageBlurEffectHover}
144	attributesKey={"imageBlurEffectHover"}
145	setAttributes={setAttributes}
146	// units={["px"]}
147	defaultValue={{ unit: "px", value: 0 }}
148	max={20}
149	step={0.5}
150	/>
151	<SPRangeControl
152	label={__("Brightness", "post-carousel")}
153	attributes={imageBrightnessHover}
154	attributesKey={"imageBrightnessHover"}
155	setAttributes={setAttributes}
156	max={10}
157	step={0.1}
158	defaultValue={1}
159	/>
160	</>
161	)}
162	{(["post-thumbnail-slider", "post-thumbnail-slider-two", "post-slider", "post-slider-two"].includes(
163	blockName
164	) \|\|
165	"background" !== imagePosition) && (
166	<>
167	<Border
168	attributes={{
169	border: imageBorder,
170	borderWidth: imageBorderWidth,
171	}}
172	attributesKey={{
173	border: "imageBorder",
174	borderWidth: "imageBorderWidth",
175	}}
176	setAttributes={setAttributes}
177	/>
178	<Spacing
179	label={__("Border Radius", "post-carousel")}
180	attributes={imageRadius}
181	attributesKey={"imageRadius"}
182	setAttributes={setAttributes}
183	units={["px", "%", "em"]}
184	defaultValue={{
185	unit: "px",
186	value: {
187	top: 8,
188	right: 8,
189	bottom: 8,
190	left: 8,
191	},
192	}}
193	indicator={"radius"}
194	/>
195	</>
196	)}
197	{imagePosition !== "background" && blockName !== "thumbnail-slider-two" && (
198	<SPRangeControl
199	label={__("Space Between Content", "post-carousel")}
200	attributes={imageSpace}
201	attributesKey={"imageSpace"}
202	setAttributes={setAttributes}
203	units={["px", "%", "em"]}
204	defaultValue={{
205	unit: "px",
206	value: defaultValues?.imageSpace,
207	}}
208	/>
209	)}
210	{showImageGallery && (
211	<Popup label={__("Arrow Settings", "post-carousel")}>
212	<>
213	<SPToggleGroupControl
214	attributes={navArrowNormalOrHover}
215	onClick={(newValue) => setNavArrowNormaOrlHover(newValue)}
216	items={[
217	{ label: "Normal", value: "color" },
218	{ label: "Hover", value: "hoverColor" },
219	]}
220	/>
221	<SpColorPicker
222	label={__("Icon Color", "post-carousel")}
223	value={imageGalleryNavArrowColor[navArrowNormalOrHover]}
224	onChange={(newColor) =>
225	setAttributes({
226	imageGalleryNavArrowColor: {
227	...imageGalleryNavArrowColor,
228	[navArrowNormalOrHover]: newColor,
229	},
230	})
231	}
232	defaultColor=""
233	/>
234	<SpColorPicker
235	label={__("Background Color", "post-carousel")}
236	value={imageGalleryNavArrowBgColor[navArrowNormalOrHover]}
237	onChange={(newColor) =>
238	setAttributes({
239	imageGalleryNavArrowBgColor: {
240	...imageGalleryNavArrowBgColor,
241	[navArrowNormalOrHover]: newColor,
242	},
243	})
244	}
245	defaultColor=""
246	/>
247	</>
248	</Popup>
249	)}
250	</>
251	);
252	};
253
254	export const ContentAreaStyleTab = ({ attributes, setAttributes }) => {
255	const {
256	contentAreaHeight,
257	contentAreaBg,
258	contentAreaBorderRadius,
259	contentAreaBoxShadow,
260	contentAreaPadding,
261	contentAreaBorder,
262	contentAreaBorderWidth,
263	contentAreaEnableBoxShadow,
264	postSliderLayout,
265	contentVerticalPosition,
266	contentHorizontalPosition,
267	blockName,
268	imagePosition,
269	postCardBg,
270	postCardBorder,
271	postCardBorderWidth,
272	postCardBorderRadius,
273	postCardBoxShadowEnable,
274	postCardBoxShadow,
275	postCardPadding,
276	postCardHoverBorderWidth,
277	postCardHoverBorderRadius,
278	postCardHoverBoxShadowEnable,
279	postCardHoverBoxShadow,
280	contentOrientation,
281	imageOverlayType,
282	contentAreaWidth,
283	contentAreaMargin,
284	contentAreaHoverBorderRadius,
285	contentAreaHoverBorderWidth,
286	blockLayoutName,
287	contentAreaInnerWidth,
288	largeContentAreaPadding,
289	layoutSixPostCardBg,
290	largeItemPadding,
291	postListLayout,
292	thumbnailThumbBGColor,
293	contentAreaThumbsBorder,
294	contentAreaThumbsBorderWidth,
295	contentAreaThumbsBorderRadius,
296	thumbnailTwoPosition,
297	} = attributes;
298
299	const [contentAreaBgStyleType, setContentAreaBgStyleType] = useState("color");
300
301	return (
302	<>
303	{["post-slider", "post-thumbnail-slider", "thumbnail-slider-two"].includes(blockName) &&
304	![
305	// 'post-slider-layout-three',
306	// 'post-slider-layout-five',
307	"post-slider-two-layout-two",
308	"post-slider-two-layout-three",
309	"thumbnail-slider-layout-six",
310	].includes(blockLayoutName) && (
311	<SPRangeControl
312	label={__("Width", "post-carousel")}
313	attributes={contentAreaInnerWidth}
314	attributesKey={"contentAreaInnerWidth"}
315	setAttributes={setAttributes}
316	units={["px", "%"]}
317	max={1600}
318	defaultValue={{ unit: "%", value: 85 }}
319	pro={true}
320	/>
321	)}
322	{("post-slider-two" === blockName \|\|
323	(imagePosition !== "top" &&
324	[
325	"sp-smart-post-list-two-layout-one",
326	"sp-smart-post-list-two-layout-two",
327	"sp-smart-post-list-two-layout-five",
328	"sp-smart-post-list-two-layout-six",
329	].includes(blockLayoutName)) \|\|
330	("thumbnail-slider-two" === blockName && ["left", "right"].includes(thumbnailTwoPosition))) && (
331	<SPToggleGroupControl
332	label={__("Vertical Position", "post-carousel")}
333	attributes={contentVerticalPosition}
334	attributesKey={"contentVerticalPosition"}
335	setAttributes={setAttributes}
336	items={[
337	{ label: <VerticalTopIcon />, value: "top" },
338	{ label: <VerticalCenterIcon />, value: "center" },
339	{ label: <VerticalBottomIcon />, value: "bottom" },
340	]}
341	/>
342	)}
343	{("post-slider-two" === blockName \|\|
344	["post-slider-layout-five", "thumbnail-slider-layout-six"].includes(blockLayoutName) \|\|
345	("background" === imagePosition && imageOverlayType === "box") \|\|
346	("thumbnail-slider-two" !== blockName && thumbnailTwoPosition === "bottom")) && (
347	<SPToggleGroupControl
348	label={__("Horizontal Position", "post-carousel")}
349	attributes={contentHorizontalPosition}
350	attributesKey={"contentHorizontalPosition"}
351	setAttributes={setAttributes}
352	items={
353	[
354	"post-slider-layout-five",
355	"post-slider-two-layout-three",
356	"thumbnail-slider-layout-six",
357	].includes(blockLayoutName)
358	? [
359	{
360	label: <HorizontalLeftIcon />,
361	value: "left",
362	},
363	{
364	label: <HorizontalRightIcon />,
365	value: "right",
366	},
367	]
368	: [
369	{
370	label: <HorizontalLeftIcon />,
371	value: "left",
372	},
373	{
374	label: <HorizontalCenterIcon />,
375	value: "center",
376	},
377	{
378	label: <HorizontalRightIcon />,
379	value: "right",
380	},
381	]
382	}
383	/>
384	)}
385	{"post-slider-two" === blockName && (imageOverlayType === "box" \|\| "background" === imagePosition) && (
386	<>
387	<SPRangeControl
388	label={__("Width", "post-carousel")}
389	attributes={contentAreaWidth}
390	setAttributes={setAttributes}
391	units={["px", "%", "Em"]}
392	max={1200}
393	attributesKey={"contentAreaWidth"}
394	defaultValue={{ unit: "%", value: 80 }}
395	pro={true}
396	/>
397	<SPRangeControl
398	label={__("Height", "post-carousel")}
399	attributes={contentAreaHeight}
400	setAttributes={setAttributes}
401	units={["px", "%", "Em"]}
402	max={700}
403	attributesKey={"contentAreaHeight"}
404	defaultValue={{ unit: "%", value: "" }}
405	/>
406	</>
407	)}
408	{![
409	// 'thumbnail-slider-two',
410	"post-slider",
411	// 'post-slider-two',
412	// 'thumbnail-slider',
413	].includes(blockName) &&
414	![
415	"thumbnail-slider-two-layout-two",
416	"thumbnail-slider-two-layout-three",
417	"thumbnail-slider-two-layout-four",
418	].includes(blockLayoutName) && (
419	<SPToggleGroupControl
420	attributes={contentAreaBgStyleType}
421	items={
422	"thumbnail-slider-two" !== blockName
423	? [
424	{ label: "Default", value: "color" },
425	{ label: "Hover", value: "hover" },
426	]
427	: [
428	{ label: "Normal", value: "color" },
429	{
430	label: "Hover & Active",
431	value: "hover",
432	},
433	]
434	}
435	onClick={(val) => setContentAreaBgStyleType(val)}
436	/>
437	)}
438	{((![
439	"post-grid-three",
440	"post-grid-four",
441	"post-grid-five",
442	"post-slider",
443	"post-slider-two",
444	"post-thumbnail-slider",
445	"thumbnail-slider-two",
446	].includes(blockName) &&
447	imagePosition !== "background") \|\|
448	[
449	// 'post-slider-layout-five',
450	// 'thumbnail-slider-layout-three',
451	// 'thumbnail-slider-layout-four',
452	// 'thumbnail-slider-layout-six',
453	].includes(blockLayoutName)) && (
454	<Background
455	label={__("Background Type", "post-carousel")}
456	colorLabel="Solid Color"
457	defaultColor="#fff"
458	attributes={postCardBg}
459	attributesKey={"postCardBg"}
460	setAttributes={setAttributes}
461	colorType={contentAreaBgStyleType}
462	items={[
463	{
464	label: <TransparentIcon />,
465	value: "transparent",
466	tooltip: "Transparent",
467	},
468	{
469	label: <BgIcon />,
470	value: "bgColor",
471	tooltip: "Solid",
472	},
473	{
474	label: <GradientIcon />,
475	value: "gradient",
476	tooltip: "Gradient",
477	},
478	]}
479	/>
480	)}
481	{/** For only Thumbnail Slider Layout Six so default color will not conflict */}
482	{/* { layoutSixPostCardBg &&
483	[ "thumbnail-slider-layout-six" ].includes(
484	blockLayoutName
485	) && (
486	<Background
487	label={ __( "Background Type", "post-carousel" ) }
488	colorLabel="Solid Color"
489	defaultColor="#fff"
490	attributes={ layoutSixPostCardBg }
491	attributesKey={ "layoutSixPostCardBg" }
492	setAttributes={ setAttributes }
493	colorType={ contentAreaBgStyleType }
494	items={ [
495	// {
496	// label: <TransparentIcon />,
497	// value: 'transparent',
498	// tooltip: 'Transparent',
499	// },
500	{
501	label: <BgIcon />,
502	value: "bgColor",
503	tooltip: "Solid",
504	},
505	{
506	label: <GradientIcon />,
507	value: "gradient",
508	tooltip: "Gradient",
509	},
510	] }
511	/>
512	) } */}
513	{/** For only Thumbnail Slider Two Thumbnails BG Color so default color will not conflict */}
514	{thumbnailThumbBGColor &&
515	["thumbnail-slider-two", "post-thumbnail-slider"].includes(blockName) &&
516	![
517	"thumbnail-slider-two-layout-two",
518	"thumbnail-slider-two-layout-three",
519	"thumbnail-slider-two-layout-four",
520	"thumbnail-slider-layout-one",
521	"thumbnail-slider-layout-two",
522	"thumbnail-slider-layout-five",
523	"thumbnail-slider-layout-six",
524	].includes(blockLayoutName) && (
525	<Background
526	label={__("Thumbs Background Type", "post-carousel")}
527	colorLabel="Solid Color"
528	defaultColor="#fff"
529	attributes={thumbnailThumbBGColor}
530	attributesKey={"thumbnailThumbBGColor"}
531	setAttributes={setAttributes}
532	colorType={contentAreaBgStyleType}
533	items={[
534	{
535	label: <TransparentIcon />,
536	value: "transparent",
537	tooltip: "Transparent",
538	},
539	{
540	label: <BgIcon />,
541	value: "bgColor",
542	tooltip: "Solid",
543	},
544	{
545	label: <GradientIcon />,
546	value: "gradient",
547	tooltip: "Gradient",
548	},
549	]}
550	/>
551	)}
552	{([
553	"orientation_six",
554	"orientation_seven",
555	"orientation_eight",
556	"list-one-layout-five",
557	"list-one-layout-six",
558	"list-one-layout-seven",
559	"list-one-layout-eight",
560	].includes(contentOrientation) \|\|
561	["post-grid-three", "post-grid-four", "post-grid-five", "post-slider", "post-slider-two"].includes(
562	blockName
563	) \|\|
564	(imagePosition === "background" && imageOverlayType === "box")) &&
565	!["post-thumbnail-slider", "post-slider"].includes(blockName) && (
566	<Background
567	label={__("Inner Background Type", "post-carousel")}
568	colorLabel="Solid Color"
569	defaultColor="#fff"
570	attributes={contentAreaBg}
571	attributesKey={"contentAreaBg"}
572	setAttributes={setAttributes}
573	colorType={"post-slider-two" === blockName ? "color" : contentAreaBgStyleType}
574	items={[
575	{
576	label: <TransparentIcon />,
577	value: "transparent",
578	tooltip: "Transparent",
579	},
580	{
581	label: <BgIcon />,
582	value: "bgColor",
583	tooltip: "Solid",
584	},
585	{
586	label: <GradientIcon />,
587	value: "gradient",
588	tooltip: "Gradient",
589	},
590	]}
591	/>
592	)}
593	{contentAreaBgStyleType === "color" && (
594	<>
595	{!["thumbnail-slider-two", "post-slider", "post-slider-two", "post-thumbnail-slider"].includes(
596	blockName
597	) && (
598	<>
599	<Border
600	attributes={{
601	border: postCardBorder,
602	borderWidth: postCardBorderWidth,
603	}}
604	attributesKey={{
605	border: "postCardBorder",
606	borderWidth: "postCardBorderWidth",
607	}}
608	setAttributes={setAttributes}
609	btnType="normal"
610	/>
611	<Spacing
612	label={__("Border Radius", "post-carousel")}
613	attributes={postCardBorderRadius}
614	attributesKey={"postCardBorderRadius"}
615	setAttributes={setAttributes}
616	units={["px", "%", "em"]}
617	defaultValue={{
618	unit: "px",
619	value: {
620	top: "8",
621	right: "8",
622	bottom: "8",
623	left: "8",
624	},
625	}}
626	indicator={"radius"}
627	/>
628	</>
629	)}
630	{(blockName === "post-slider-two" \|\|
631	[
632	"orientation_six",
633	"orientation_seven",
634	"orientation_eight",
635	"list-one-layout-three",
636	"list-one-layout-four",
637	].includes(contentOrientation) \|\|
638	(blockLayoutName &&
639	[
640	// 'post-slider-layout-three',
641	"thumbnail-slider-layout-six",
642	].includes(blockLayoutName))) && (
643	<>
644	<Border
645	label="Inner Border"
646	attributes={{
647	border: contentAreaBorder,
648	borderWidth: contentAreaBorderWidth,
649	}}
650	setAttributes={setAttributes}
651	attributesKey={{
652	border: "contentAreaBorder",
653	borderWidth: "contentAreaBorderWidth",
654	}}
655	btnType="normal"
656	/>
657	<Spacing
658	label={__("Inner Border Radius", "post-carousel")}
659	attributes={contentAreaBorderRadius}
660	attributesKey={"contentAreaBorderRadius"}
661	setAttributes={setAttributes}
662	units={["px", "%", "em"]}
663	defaultValue={{
664	unit: "px",
665	value: {
666	top: "",
667	right: "",
668	bottom: "",
669	left: "",
670	},
671	}}
672	indicator={"radius"}
673	/>
674	</>
675	)}
676	{!["post-slider", "post-slider-two", "post-thumbnail-slider", "thumbnail-slider-two"].includes(
677	blockName
678	) && (
679	<>
680	<Toggle
681	label={__("Box Shadow", "post-carousel")}
682	attributes={postCardBoxShadowEnable}
683	attributesKey={"postCardBoxShadowEnable"}
684	setAttributes={setAttributes}
685	/>
686	{postCardBoxShadowEnable && (
687	<BoxShadow
688	label={__("Box Shadow", "post-carousel")}
689	attributes={postCardBoxShadow}
690	attributesKey={"postCardBoxShadow"}
691	setAttributes={setAttributes}
692	disabledOption={
693	"post-timeline-three" === blockName ? ["custom", "xl-deep-12dp"] : []
694	}
695	/>
696	)}
697	</>
698	)}
699	{[
700	"orientation_six",
701	"orientation_seven",
702	"orientation_eight",
703	"list-one-layout-five",
704	"list-one-layout-six",
705	"list-one-layout-seven",
706	"list-one-layout-eight",
707	].includes(contentOrientation) && (
708	<>
709	<Toggle
710	label={__("Inner Box Shadow", "post-carousel")}
711	attributes={contentAreaEnableBoxShadow}
712	attributesKey={"contentAreaEnableBoxShadow"}
713	setAttributes={setAttributes}
714	/>
715	{contentAreaEnableBoxShadow && (
716	<BoxShadow
717	label={__("Inner Box Shadow", "post-carousel")}
718	attributes={contentAreaBoxShadow}
719	attributesKey={"contentAreaBoxShadow"}
720	setAttributes={setAttributes}
721	/>
722	)}
723	</>
724	)}
725	</>
726	)}
727	{contentAreaBgStyleType === "hover" && (
728	<>
729	{!["thumbnail-slider-two", "post-slider", "post-slider-two", "post-thumbnail-slider"].includes(
730	blockName
731	) && (
732	<>
733	<Border
734	attributes={{
735	border: postCardBorder,
736	borderWidth: postCardHoverBorderWidth,
737	}}
738	attributesKey={{
739	border: "postCardBorder",
740	borderWidth: "postCardHoverBorderWidth",
741	}}
742	setAttributes={setAttributes}
743	btnType="hover"
744	/>
745	<Spacing
746	label={__("Border Radius", "post-carousel")}
747	attributes={postCardHoverBorderRadius}
748	attributesKey={"postCardHoverBorderRadius"}
749	setAttributes={setAttributes}
750	units={["px", "%", "em"]}
751	defaultValue={{
752	unit: "px",
753	value: {
754	top: "8",
755	right: "8",
756	bottom: "8",
757	left: "8",
758	},
759	}}
760	indicator={"radius"}
761	/>
762	</>
763	)}
764	{(blockName === "post-slider-two" \|\|
765	[
766	"orientation_six",
767	"orientation_seven",
768	"orientation_eight",
769	"list-one-layout-five",
770	"list-one-layout-six",
771	"list-one-layout-seven",
772	"list-one-layout-eight",
773	].includes(contentOrientation) \|\|
774	["thumbnail-slider-layout-six"].includes(blockLayoutName)) && (
775	<>
776	<Border
777	label="Inner Border"
778	attributes={{
779	border: contentAreaBorder,
780	borderWidth: contentAreaHoverBorderWidth,
781	}}
782	setAttributes={setAttributes}
783	attributesKey={{
784	border: "contentAreaBorder",
785	borderWidth: "contentAreaHoverBorderWidth",
786	}}
787	btnType="hover"
788	/>
789	<Spacing
790	label={__("Inner Border Radius", "post-carousel")}
791	attributes={contentAreaHoverBorderRadius}
792	attributesKey={"contentAreaHoverBorderRadius"}
793	setAttributes={setAttributes}
794	units={["px", "%", "em"]}
795	defaultValue={{
796	unit: "px",
797	value: {
798	top: "8",
799	right: "8",
800	bottom: "8",
801	left: "8",
802	},
803	}}
804	indicator={"radius"}
805	/>
806	</>
807	)}
808	{!["post-slider", "post-slider-two", "post-thumbnail-slider", "thumbnail-slider-two"].includes(
809	blockName
810	) && (
811	<>
812	<Toggle
813	label={__("Box Shadow", "post-carousel")}
814	attributes={postCardHoverBoxShadowEnable}
815	attributesKey={"postCardHoverBoxShadowEnable"}
816	setAttributes={setAttributes}
817	/>
818	{postCardHoverBoxShadowEnable && (
819	<BoxShadow
820	label={__("Hover Box Shadow", "post-carousel")}
821	attributes={postCardHoverBoxShadow}
822	attributesKey={"postCardHoverBoxShadow"}
823	setAttributes={setAttributes}
824	/>
825	)}
826	</>
827	)}
828	</>
829	)}
830	{![
831	// 'thumbnail-slider-two',
832	"post-slider",
833	// 'post-slider-two',
834	// 'thumbnail-slider',
835	].includes(blockName) && <Divider position={"sp-w-100pct bottom"} />}
836	{[
837	"thumbnail-slider-two-layout-three",
838	"thumbnail-slider-two-layout-four",
839	"thumbnail-slider-two-layout-five",
840	].includes(blockLayoutName) && (
841	<>
842	<Border
843	label={__("Thumb Border", "post-carousel")}
844	attributes={{
845	border: contentAreaThumbsBorder,
846	borderWidth: contentAreaThumbsBorderWidth,
847	}}
848	attributesKey={{
849	border: "contentAreaThumbsBorder",
850	borderWidth: "contentAreaThumbsBorderWidth",
851	}}
852	setAttributes={setAttributes}
853	/>
854	<Spacing
855	label={__("Thumb Border Radius", "post-carousel")}
856	attributes={contentAreaThumbsBorderRadius}
857	attributesKey={"contentAreaThumbsBorderRadius"}
858	setAttributes={setAttributes}
859	defaultValue={{ unit: "px", value: 1 }}
860	/>
861	</>
862	)}
863	{![
864	"post-slider",
865	"post-slider-two",
866	// 'post-thumbnail-slider',
867	// 'thumbnail-slider-two',
868	"post-grid-five",
869	].includes(blockName) &&
870	imagePosition !== "background" &&
871	imageOverlayType !== "box" && (
872	<Spacing
873	label={__("Padding", "post-carousel")}
874	attributes={postCardPadding}
875	attributesKey={"postCardPadding"}
876	setAttributes={setAttributes}
877	units={["px", "%", "em"]}
878	defaultValue={{
879	unit: "px",
880	value: {
881	top: "0",
882	right: "0",
883	bottom: "0",
884	left: "0",
885	},
886	}}
887	/>
888	)}
889	{[
890	"sp-smart-post-list-two-layout-one",
891	"sp-smart-post-list-two-layout-two",
892	"sp-smart-post-list-two-layout-five",
893	"sp-smart-post-list-two-layout-six",
894	"sp-smart-post-list-three-layout-three",
895	"sp-smart-post-list-three-layout-four",
896	].includes(postListLayout) && (
897	<Spacing
898	label={__("Large Item Padding", "post-carousel")}
899	attributes={largeItemPadding}
900	attributesKey={"largeItemPadding"}
901	setAttributes={setAttributes}
902	units={["px", "%", "em"]}
903	defaultValue={{
904	unit: "px",
905	value: {
906	top: "30",
907	right: "30",
908	bottom: "30",
909	left: "30",
910	},
911	}}
912	/>
913	)}
914	{"thumbnail-slider-two" !== blockName && (
915	<Spacing
916	label={__("Inner Padding", "post-carousel")}
917	attributes={contentAreaPadding}
918	attributesKey={"contentAreaPadding"}
919	setAttributes={setAttributes}
920	units={["px", "%", "em"]}
921	defaultValue={{
922	unit: "px",
923	value: {
924	top: "8",
925	right: "16",
926	bottom: "8",
927	left: "16",
928	},
929	}}
930	/>
931	)}
932	{["post-grid-six"].includes(blockName) && (
933	<Spacing
934	label={__("Large Item Inner Padding", "post-carousel")}
935	attributes={largeContentAreaPadding}
936	attributesKey={"largeContentAreaPadding"}
937	setAttributes={setAttributes}
938	units={["px", "%", "em"]}
939	defaultValue={{
940	unit: "px",
941	value: {
942	top: "8",
943	right: "16",
944	bottom: "8",
945	left: "16",
946	},
947	}}
948	/>
949	)}
950	{![
951	"post-slider",
952	"post-slider-two",
953	"post-grid-four",
954	// 'thumbnail-slider-two',
955	].includes(blockName) && (
956	<>
957	<Spacing
958	label={__("Margin", "post-carousel")}
959	attributes={contentAreaMargin}
960	attributesKey={"contentAreaMargin"}
961	setAttributes={setAttributes}
962	units={["px", "%", "em"]}
963	defaultValue={{
964	unit: "px",
965	value: {
966	top: "0",
967	right: "0",
968	bottom: "0",
969	left: "0",
970	},
971	}}
972	/>
973	</>
974	)}
975	</>
976	);
977	};
978
979	export const TitleStyleTab = ({ attributes, setAttributes }) => {
980	const [colorState, setColorState] = useState("normal");
981	const {
982	blockName,
983	titleColor,
984	titleMargin,
985	titleTypography,
986	titleFontSize,
987	titleLatterSpacing,
988	titleLineHeight,
989	largeItemTitleColor,
990	largeItemTitleLineHeight,
991	largeItemTitleLatterSpacing,
992	largeItemTitleFontSize,
993	largeItemTitleTypography,
994	blockLayoutName,
995	thumbnailItemsTitleColor,
996	titleWordSpacing,
997	largeItemTitleWordSpacing,
998	titleGlobalTypography,
999	largeItemTitleGlobalTypography,
1000	postBadgesTypography,
1001	postBadgesFontSize,
1002	postBadgesLineHeight,
1003	postBadgesLetterSpacing,
1004	postBadgesWordSpacing,
1005	postBadgesGlobalTypography,
1006	badgesLabelColor,
1007	badgesBgColor,
1008	badgesBorder,
1009	badgesBorderWidth,
1010	badgesBorderRadius,
1011	badgesPadding,
1012	titleUnderlineEffect,
1013	titleEffect,
1014	titleEffectColor,
1015	postBadgesShow,
1016	} = attributes;
1017
1018	const defaultValues = useDefaultValue(blockName);
1019
1020	const underLineDirections = [
1021	{ label: "Left to Right", value: "leftToRight" },
1022	{ label: "Right to Left", value: "rightToLeft" },
1023	{ label: "Start Centered", value: "startCentered" },
1024	];
1025
1026	const topBottomDirections = [
1027	{ label: "Left to Right", value: "leftToRight" },
1028	{ label: "Right to Left", value: "rightToLeft" },
1029	{ label: "Start Centered", value: "startCentered" },
1030	{ label: "Opposite Start", value: "oppositeStart" },
1031	{ label: "Opposite Start Reversed", value: "oppositeStartReversed" },
1032	];
1033
1034	return (
1035	<>
1036	<TypographyNew
1037	attributes={{
1038	family: titleTypography,
1039	familyKey: "titleTypography",
1040	fontSize: titleFontSize,
1041	fontSizeKey: "titleFontSize",
1042	fontSpacing: titleLatterSpacing,
1043	fontSpacingKey: "titleLatterSpacing",
1044	lineHeight: titleLineHeight,
1045	lineHeightKey: "titleLineHeight",
1046	wordSpacing: titleWordSpacing,
1047	wordSpacingKey: "titleWordSpacing",
1048	globalTypo: titleGlobalTypography,
1049	globalTypoKey: "titleGlobalTypography",
1050	}}
1051	setAttributes={setAttributes}
1052	spacingDefaultValue={{ unit: "px", value: 0 }}
1053	fontSizeDefault={{
1054	unit: "px",
1055	value: defaultValues?.titleFontSize,
1056	}}
1057	lineDefaultValue={1.25}
1058	typographyLabel={
1059	blockName === "thumbnail-slider-two"
1060	? __("Thumb Typography", "post-carousel")
1061	: __("Typography", "post-carousel")
1062	}
1063	fontSizePresetType={"heading"}
1064	/>
1065	{/* <TypographyNew
1066	attributes={{
1067	family: postBadgesTypography,
1068	familyKey: "postBadgesTypography",
1069	fontSize: postBadgesFontSize,
1070	fontSizeKey: "postBadgesFontSize",
1071	fontSpacing: postBadgesLetterSpacing,
1072	fontSpacingKey: "postBadgesLetterSpacing",
1073	lineHeight: postBadgesLineHeight,
1074	lineHeightKey: "postBadgesLineHeight",
1075	wordSpacing: postBadgesWordSpacing,
1076	wordSpacingKey: "postBadgesWordSpacing",
1077	globalTypo: postBadgesGlobalTypography,
1078	globalTypoKey: "postBadgesGlobalTypography",
1079	}}
1080	setAttributes={setAttributes}
1081	spacingDefaultValue={{ unit: "px", value: 0 }}
1082	fontSizeDefault={{
1083	unit: "px",
1084	value: defaultValues?.badgesFontSize,
1085	}}
1086	lineDefaultValue={1.25}
1087	typographyLabel={__("Badges Typography", "post-carousel")}
1088	fontSizePresetType={"heading"}
1089	/> */}
1090	{[
1091	"post-grid-one",
1092	"post-grid-six",
1093	"post-grid-three",
1094	"post-grid-four",
1095	"post-grid-five",
1096	"post-list-two",
1097	"post-list-three",
1098	"thumbnail-slider-two",
1099	].includes(blockName) &&
1100	!["grid-one-layout-one", "grid-one-layout-five"].includes(blockLayoutName) && (
1101	<TypographyNew
1102	attributes={{
1103	family: largeItemTitleTypography,
1104	familyKey: "largeItemTitleTypography",
1105	fontSize: largeItemTitleFontSize,
1106	fontSizeKey: "largeItemTitleFontSize",
1107	fontSpacing: largeItemTitleLatterSpacing,
1108	fontSpacingKey: "largeItemTitleLatterSpacing",
1109	lineHeight: largeItemTitleLineHeight,
1110	lineHeightKey: "largeItemTitleLineHeight",
1111	wordSpacing: largeItemTitleWordSpacing,
1112	wordSpacingKey: "largeItemTitleWordSpacing",
1113	globalTypo: largeItemTitleGlobalTypography,
1114	globalTypoKey: "largeItemTitleGlobalTypography",
1115	}}
1116	setAttributes={setAttributes}
1117	spacingDefaultValue={{ unit: "px", value: 0 }}
1118	fontSizeDefault={{
1119	unit: "px",
1120	value: defaultValues?.largeItemTitleFontSize,
1121	}}
1122	typographyLabel="Large Item Typography"
1123	fontSizePresetType={"heading"}
1124	/>
1125	)}
1126	<SPToggleGroupControl
1127	attributes={colorState}
1128	items={[
1129	{ label: "Normal", value: "normal" },
1130	{ label: "Hover", value: "hover" },
1131	]}
1132	onClick={(newColor) => setColorState(newColor)}
1133	/>
1134	{"normal" === colorState ? (
1135	<>
1136	<SpColorPicker
1137	label={__("Color", "post-carousel")}
1138	value={titleColor.color}
1139	onChange={(newColor) =>
1140	setAttributes({
1141	titleColor: { ...titleColor, color: newColor },
1142	})
1143	}
1144	defaultColor=""
1145	/>
1146	{["post-grid-six", "post-list-two", "post-list-three", "thumbnail-slider-two"].includes(
1147	blockName
1148	) && (
1149	<SpColorPicker
1150	label={__("Large Items Color", "post-carousel")}
1151	value={largeItemTitleColor.color}
1152	onChange={(newColor) =>
1153	setAttributes({
1154	largeItemTitleColor: {
1155	...largeItemTitleColor,
1156	color: newColor,
1157	},
1158	})
1159	}
1160	defaultColor={defaultValues?.metaColor}
1161	/>
1162	)}
1163	{blockLayoutName &&
1164	inArray(["thumbnail-slider-layout-three", "thumbnail-slider-layout-four"], blockLayoutName) && (
1165	<SpColorPicker
1166	label={__("Thumbnails Color", "post-carousel")}
1167	value={thumbnailItemsTitleColor.color}
1168	onChange={(newColor) =>
1169	setAttributes({
1170	thumbnailItemsTitleColor: {
1171	...thumbnailItemsTitleColor,
1172	color: newColor,
1173	},
1174	})
1175	}
1176	defaultColor="#FFFFFF"
1177	/>
1178	)}
1179	</>
1180	) : (
1181	<>
1182	<SpColorPicker
1183	label={__("Color", "post-carousel")}
1184	value={titleColor.hoverColor}
1185	onChange={(newColor) =>
1186	setAttributes({
1187	titleColor: {
1188	...titleColor,
1189	hoverColor: newColor,
1190	},
1191	})
1192	}
1193	/>
1194	{["post-grid-six", "post-list-two", "post-list-three", "thumbnail-slider-two"].includes(
1195	blockName
1196	) && (
1197	<SpColorPicker
1198	label={__("Large Items Hover Color", "post-carousel")}
1199	value={largeItemTitleColor.hoverColor}
1200	onChange={(newColor) =>
1201	setAttributes({
1202	largeItemTitleColor: {
1203	...largeItemTitleColor,
1204	hoverColor: newColor,
1205	},
1206	})
1207	}
1208	/>
1209	)}
1210	{blockLayoutName &&
1211	inArray(["thumbnail-slider-layout-three", "thumbnail-slider-layout-four"], blockLayoutName) && (
1212	<SpColorPicker
1213	label={__("Thumbnails Hover Color", "post-carousel")}
1214	value={thumbnailItemsTitleColor.hoverColor}
1215	onChange={(newColor) =>
1216	setAttributes({
1217	thumbnailItemsTitleColor: {
1218	...thumbnailItemsTitleColor,
1219	hoverColor: newColor,
1220	},
1221	})
1222	}
1223	defaultColor="#FFFFFF"
1224	/>
1225	)}
1226	</>
1227	)}
1228	<Divider position={"sp-w-100pct bottom"} color="#bcbcbc" />
1229
1230	{[
1231	"post-carousel-two",
1232	"post-grid-two",
1233	"post-grid-three",
1234	"post-grid-four",
1235	"post-grid-five",
1236	"post-grid-six",
1237	"post-slider",
1238	"post-slider-two",
1239	"post-thumbnail-slider",
1240	"thumbnail-slider-two",
1241	"post-timeline-two",
1242	].includes(blockName) && (
1243	<>
1244	<SelectField
1245	label={__("Hover Effect", "post-carousel")}
1246	attributes={titleEffect}
1247	attributesKey={"titleEffect"}
1248	setAttributes={setAttributes}
1249	items={[
1250	{ label: "None", value: "none" },
1251	{
1252	label: "Underline (Pro)",
1253	value: "underline",
1254	disabled: "disabled"
1255	},
1256	{
1257	label: "Top-Bottom Line (Pro)",
1258	value: "topBottomLine",
1259	disabled: "disabled"
1260	},
1261	{
1262	label: "Background Fill (Pro)",
1263	value: "backgroundFill",
1264	disabled: "disabled"
1265	},
1266	]}
1267	/>
1268	{(titleEffect === "underline" \|\| titleEffect === "topBottomLine") && (
1269	<SelectField
1270	label={__("Direction", "post-carousel")}
1271	attributes={titleUnderlineEffect}
1272	attributesKey={"titleUnderlineEffect"}
1273	setAttributes={setAttributes}
1274	items={titleEffect === "underline" ? underLineDirections : topBottomDirections}
1275	/>
1276	)}
1277
1278	<SpColorPicker
1279	label={__("Hover Effect Color", "post-carousel")}
1280	value={titleEffectColor}
1281	onChange={(newColor) =>
1282	setAttributes({
1283	titleEffectColor: newColor,
1284	})
1285	}
1286	defaultColor="#FFFFFF"
1287	/>
1288	</>
1289	)}
1290
1291	<Spacing
1292	label={__("Margin", "post-carousel")}
1293	attributes={titleMargin}
1294	attributesKey={"titleMargin"}
1295	setAttributes={setAttributes}
1296	units={["px", "%", "em"]}
1297	defaultValue={{
1298	unit: "px",
1299	value: {
1300	top: "",
1301	right: "",
1302	bottom: "",
1303	left: "",
1304	},
1305	}}
1306	/>
1307	{postBadgesShow && (
1308	<Popup
1309	label={__("Badges Style", "post-carousel")}
1310	divClassName="sp-smart-post-title-badges-style-tab-wrapper"
1311	>
1312	<TitleBadgesStyleTab
1313	attributes={{
1314	badgesLabelColor,
1315	badgesBgColor,
1316	badgesBorder,
1317	badgesBorderWidth,
1318	badgesBorderRadius,
1319	badgesPadding,
1320	}}
1321	setAttributes={setAttributes}
1322	/>
1323	</Popup>
1324	)}
1325	</>
1326	);
1327	};
1328	export const TitleBadgesStyleTab = ({ attributes, setAttributes }) => {
1329	const { badgesLabelColor, badgesBgColor, badgesBorder, badgesBorderWidth, badgesBorderRadius, badgesPadding } =
1330	attributes;
1331	return (
1332	<>
1333	<SpColorPicker
1334	label={__("Label Color", "post-carousel")}
1335	value={badgesLabelColor}
1336	onChange={(newColor) => {
1337	setAttributes({ badgesLabelColor: newColor });
1338	}}
1339	/>
1340	<SpColorPicker
1341	label={__("Background Color", "post-carousel")}
1342	value={badgesBgColor}
1343	onChange={(newColor) => {
1344	setAttributes({ badgesBgColor: newColor });
1345	}}
1346	/>
1347	<Border
1348	label={__("Border", "post-carousel")}
1349	attributes={{
1350	border: badgesBorder,
1351	borderWidth: badgesBorderWidth,
1352	}}
1353	attributesKey={{
1354	border: "badgesBorder",
1355	borderWidth: "badgesBorderWidth",
1356	}}
1357	setAttributes={setAttributes}
1358	btnType="normal"
1359	/>
1360	<Spacing
1361	label={__("Border Radius", "post-carousel")}
1362	attributes={badgesBorderRadius}
1363	attributesKey={"badgesBorderRadius"}
1364	setAttributes={setAttributes}
1365	units={["px", "%", "em"]}
1366	defaultValue={{
1367	unit: "px",
1368	value: {
1369	top: 4,
1370	right: 4,
1371	bottom: 4,
1372	left: 4,
1373	},
1374	}}
1375	indicator={"radius"}
1376	/>
1377	<Spacing
1378	label={__("Padding", "post-carousel")}
1379	attributes={badgesPadding}
1380	attributesKey={"badgesPadding"}
1381	setAttributes={setAttributes}
1382	units={["px", "%", "em"]}
1383	defaultValue={{
1384	unit: "px",
1385	value: {
1386	top: 4,
1387	right: 8,
1388	bottom: 4,
1389	left: 8,
1390	},
1391	}}
1392	/>
1393	</>
1394	);
1395	};
1396	export const MetaDataStyleTab = ({ attributes, setAttributes }) => {
1397	const [metadataColorState, setMetadataColorState] = useState("normal");
1398	const {
1399	metaTypography,
1400	metaFontSize,
1401	metaFontSpacing,
1402	metaLineHeight,
1403	metaColors,
1404	metaSeparator,
1405	metaSeparatorColor,
1406	metaSpaceBetween,
1407	metadataMargin,
1408	metaLargeTypography,
1409	metaLargeFontSize,
1410	metaLargeFontSpacing,
1411	metaLargeLineHeight,
1412	largeMetaColors,
1413	blockName,
1414	metaRowGap,
1415	metaWordSpacing,
1416	metaLargeWordSpacing,
1417	metaGlobalTypography,
1418	} = attributes;
1419
1420	const defaultValues = useDefaultValue(blockName);
1421
1422	return (
1423	<>
1424	<TypographyNew
1425	attributes={{
1426	family: metaTypography,
1427	familyKey: "metaTypography",
1428	fontSize: metaFontSize,
1429	fontSizeKey: "metaFontSize",
1430	fontSpacing: metaFontSpacing,
1431	fontSpacingKey: "metaFontSpacing",
1432	lineHeight: metaLineHeight,
1433	lineHeightKey: "metaLineHeight",
1434	wordSpacing: metaWordSpacing,
1435	wordSpacingKey: "metaWordSpacing",
1436	globalTypo: metaGlobalTypography,
1437	globalTypoKey: "metaGlobalTypography",
1438	}}
1439	setAttributes={setAttributes}
1440	spacingDefaultValue={{ unit: "px", value: 0 }}
1441	fontSizeDefault={{ unit: "px", value: 14 }}
1442	/>
1443	{["post-grid-six", "post-grid-four", "post-grid-five"].includes(blockName) && (
1444	<TypographyNew
1445	attributes={{
1446	family: metaLargeTypography,
1447	familyKey: "metaLargeTypography",
1448	fontSize: metaLargeFontSize,
1449	fontSizeKey: "metaLargeFontSize",
1450	fontSpacing: metaLargeFontSpacing,
1451	fontSpacingKey: "metaLargeFontSpacing",
1452	lineHeight: metaLargeLineHeight,
1453	lineHeightKey: "metaLargeLineHeight",
1454	wordSpacing: metaLargeWordSpacing,
1455	wordSpacingKey: "metaLargeWordSpacing",
1456	}}
1457	setAttributes={setAttributes}
1458	spacingDefaultValue={{ unit: "px", value: 0 }}
1459	fontSizeDefault={{ unit: "px", value: 18 }}
1460	lineDefaultValue={{ unit: "px", value: 26 }}
1461	typographyLabel={__("Large Item(s) Typography", "post-carousel")}
1462	/>
1463	)}
1464	<SPToggleGroupControl
1465	attributes={metadataColorState}
1466	items={[
1467	{ label: "Normal", value: "normal" },
1468	{ label: "Hover", value: "hover" },
1469	]}
1470	onClick={(newColor) => setMetadataColorState(newColor)}
1471	/>
1472	{"normal" === metadataColorState ? (
1473	<>
1474	<SpColorPicker
1475	label={__("Color", "post-carousel")}
1476	value={metaColors.color}
1477	onChange={(newColor) =>
1478	setAttributes({
1479	metaColors: { ...metaColors, color: newColor },
1480	})
1481	}
1482	defaultColor="#333333"
1483	/>
1484	{["post-grid-six", "post-list-two", "post-list-three"].includes(blockName) && (
1485	<SpColorPicker
1486	label={__("Large Items Color", "post-carousel")}
1487	value={largeMetaColors.color}
1488	onChange={(newColor) =>
1489	setAttributes({
1490	largeMetaColors: {
1491	...largeMetaColors,
1492	color: newColor,
1493	},
1494	})
1495	}
1496	defaultColor={defaultValues?.metaColor}
1497	/>
1498	)}
1499	</>
1500	) : (
1501	<>
1502	<SpColorPicker
1503	label={__("Hover Color", "post-carousel")}
1504	value={metaColors.hoverColor}
1505	onChange={(newColor) =>
1506	setAttributes({
1507	metaColors: {
1508	...metaColors,
1509	hoverColor: newColor,
1510	},
1511	})
1512	}
1513	/>
1514	{["post-grid-six", "post-list-two", "post-list-three"].includes(blockName) && (
1515	<SpColorPicker
1516	label={__("Large Items Hover Color", "post-carousel")}
1517	value={largeMetaColors.hoverColor}
1518	onChange={(newColor) =>
1519	setAttributes({
1520	largeMetaColors: {
1521	...largeMetaColors,
1522	hoverColor: newColor,
1523	},
1524	})
1525	}
1526	defaultColor={defaultValues?.metaColor}
1527	/>
1528	)}
1529	</>
1530	)}
1531	<Divider position={"sp-w-100pct bottom"} />
1532	<SelectField
1533	label={__("Separator", "post-carousel")}
1534	attributes={metaSeparator}
1535	attributesKey={"metaSeparator"}
1536	setAttributes={setAttributes}
1537	items={[
1538	{
1539	label: "Select a Separator",
1540	value: "",
1541	disabled: "disabled",
1542	},
1543	{ label: "Normal Space", value: "normal-space" },
1544	{ label: "Full Stop ( . )", value: "full-stop" },
1545	{ label: "Straight Line ( \| )", value: "straight-line" },
1546	{ label: "Slash ( / )", value: "slash" },
1547	{ label: `Back Slash ( \\ )`, value: "back-slash" },
1548	]}
1549	/>
1550	{metaSeparator !== "normal-space" && (
1551	<SpColorPicker
1552	label={__("Separator Color", "post-carousel")}
1553	value={metaSeparatorColor}
1554	onChange={(newColor) => setAttributes({ metaSeparatorColor: newColor })}
1555	defaultColor="#333333"
1556	/>
1557	)}
1558	<SPRangeControl
1559	label={__("Space Between Meta Data", "post-carousel")}
1560	attributes={metaSpaceBetween}
1561	attributesKey={"metaSpaceBetween"}
1562	setAttributes={setAttributes}
1563	resetIcon={true}
1564	max={50}
1565	defaultValue={{ unit: "px", value: 12 }}
1566	/>
1567	<SPRangeControl
1568	label={__("Meta Data Row Gap", "post-carousel")}
1569	attributes={metaRowGap}
1570	attributesKey={"metaRowGap"}
1571	setAttributes={setAttributes}
1572	resetIcon={true}
1573	max={50}
1574	defaultValue={{ unit: "px", value: 8 }}
1575	/>
1576	<Spacing
1577	label={__("Margin", "post-carousel")}
1578	attributes={metadataMargin}
1579	attributesKey={"metadataMargin"}
1580	setAttributes={setAttributes}
1581	units={["px", "%", "Em"]}
1582	defaultValue={{
1583	unit: "px",
1584	value: {
1585	top: "0",
1586	right: "0",
1587	bottom: "8",
1588	left: "0",
1589	},
1590	}}
1591	/>
1592	</>
1593	);
1594	};
1595	export const ExcerptStyleTab = ({ attributes, setAttributes }) => {
1596	const {
1597	excerptTypography,
1598	excerptFontSize,
1599	excerptFontSpacing,
1600	excerptLineHeight,
1601	excerptColor,
1602	excerptMargin,
1603	blockName,
1604	largeExcerptColor,
1605	excerptWordSpacing,
1606	excerptGlobalTypography,
1607	} = attributes;
1608	return (
1609	<>
1610	<TypographyNew
1611	attributes={{
1612	family: excerptTypography,
1613	familyKey: "excerptTypography",
1614	fontSize: excerptFontSize,
1615	fontSizeKey: "excerptFontSize",
1616	fontSpacing: excerptFontSpacing,
1617	fontSpacingKey: "excerptFontSpacing",
1618	lineHeight: excerptLineHeight,
1619	lineHeightKey: "excerptLineHeight",
1620	wordSpacing: excerptWordSpacing,
1621	wordSpacingKey: "excerptWordSpacing",
1622	globalTypo: excerptGlobalTypography,
1623	globalTypoKey: "excerptGlobalTypography",
1624	}}
1625	setAttributes={setAttributes}
1626	spacingDefaultValue={{ unit: "px", value: 0 }}
1627	fontSizeDefault={{ unit: "px", value: 18 }}
1628	/>
1629
1630	<SpColorPicker
1631	label={__("Color", "post-carousel")}
1632	value={excerptColor.color}
1633	onChange={(newColor) =>
1634	setAttributes({
1635	excerptColor: {
1636	...excerptColor,
1637	color: newColor,
1638	},
1639	})
1640	}
1641	defaultColor="#4E4F52"
1642	/>
1643	{["post-list-two", "post-list-three"].includes(blockName) && (
1644	<SpColorPicker
1645	label={__("Large Item Color", "post-carousel")}
1646	value={largeExcerptColor.color}
1647	onChange={(newColor) =>
1648	setAttributes({
1649	largeExcerptColor: {
1650	...largeExcerptColor,
1651	color: newColor,
1652	},
1653	})
1654	}
1655	defaultColor=""
1656	/>
1657	)}
1658	<Spacing
1659	label={__("Margin", "post-carousel")}
1660	attributes={excerptMargin}
1661	attributesKey={"excerptMargin"}
1662	setAttributes={setAttributes}
1663	units={["px", "%", "em"]}
1664	defaultValue={{
1665	unit: "px",
1666	value: {
1667	top: 0,
1668	right: 0,
1669	bottom: 0,
1670	left: 0,
1671	},
1672	}}
1673	/>
1674	</>
1675	);
1676	};
1677	export const ReadMoreStyleTab = ({ attributes, setAttributes }) => {
1678	const {
1679	blockName,
1680	readMoreButtonTypography,
1681	readMoreButtonFontSize,
1682	readMoreButtonFontSpacing,
1683	readMoreButtonLineHeight,
1684	readMoreIconStyle,
1685	readMoreColor,
1686	readMoreBg,
1687	readMoreButtonBorderRadius,
1688	readMoreButtonPadding,
1689	readMoreButtonMargin,
1690	readMoreButtonBorder,
1691	readMoreButtonBorderWidth,
1692	largeItemReadMoreColor,
1693	largeItemReadMoreBg,
1694	largeItemReadMoreButtonBorder,
1695	largeItemReadMoreButtonBorderWidth,
1696	readMoreIconGap,
1697	readMoreTextColor,
1698	readMoreButtonType,
1699	readMoreButtonWordSpacing,
1700	readMoreButtonBorderWidthHover,
1701	largeItemReadMoreBtnBorderWidthHover,
1702	readMoreButtonBorderRadiusHover,
1703	readMoreIocVisibility,
1704	readMoreButtonGlobalTypography,
1705	} = attributes;
1706	const [readMoreButtonStyleType, setReadMoreButtonStyleType] = useState("color");
1707	return (
1708	<>
1709	<TypographyNew
1710	attributes={{
1711	family: readMoreButtonTypography,
1712	familyKey: "readMoreButtonTypography",
1713	fontSize: readMoreButtonFontSize,
1714	fontSizeKey: "readMoreButtonFontSize",
1715	fontSpacing: readMoreButtonFontSpacing,
1716	fontSpacingKey: "readMoreButtonFontSpacing",
1717	lineHeight: readMoreButtonLineHeight,
1718	lineHeightKey: "readMoreButtonLineHeight",
1719	wordSpacing: readMoreButtonWordSpacing,
1720	wordSpacingKey: "readMoreButtonWordSpacing",
1721	globalTypo: readMoreButtonGlobalTypography,
1722	globalTypoKey: "readMoreButtonGlobalTypography",
1723	}}
1724	setAttributes={setAttributes}
1725	spacingDefaultValue={{ unit: "px", value: 0 }}
1726	fontSizeDefault={{ unit: "px", value: 18 }}
1727	/>
1728	{/* <Toggle
1729	label={ __( 'Icon Always', 'post-carousel' ) }
1730	attributes={ showReadMoreIcon }
1731	setAttributes={ setAttributes }
1732	attributesKey={ 'showReadMoreIcon' }
1733	/>
1734	<Toggle
1735	label={ __( 'Icon on Hover', 'post-carousel' ) }
1736	attributes={ showReadMoreIconHover }
1737	setAttributes={ setAttributes }
1738	attributesKey={ 'showReadMoreIconHover' }
1739	/> */}
1740	<SPToggleGroupControl
1741	label={__("Icon Visibility", "post-carousel")}
1742	attributes={readMoreIocVisibility}
1743	attributesKey={"readMoreIocVisibility"}
1744	setAttributes={setAttributes}
1745	items={[
1746	{ label: "None", value: "none" },
1747	{ label: "Always", value: "always", disabled: "disabled" },
1748	{ label: "Hover", value: "hover", disabled: "disabled" },
1749	]}
1750	/>
1751	{["always", "hover"].includes(readMoreIocVisibility) && (
1752	<>
1753	<SelectDropdown
1754	label={__("Icon Style", "post-carousel")}
1755	attributes={readMoreIconStyle}
1756	attributesKey={"readMoreIconStyle"}
1757	setAttributes={setAttributes}
1758	options={[
1759	{
1760	label: "Chevron Solid",
1761	value: "right-open",
1762	icon: <i className="sp-icon-right-open"></i>,
1763	},
1764	{
1765	label: "Arrow Solid",
1766	value: "right-one",
1767	icon: <i className="sp-icon-right-one"></i>,
1768	},
1769	{
1770	label: "Chevron Outline",
1771	value: "right-open-outline",
1772	icon: <i className="sp-icon-right-open-outline"></i>,
1773	},
1774	{
1775	label: "Arrow Minimal",
1776	value: "arrow-right-solid",
1777	icon: <i className="sp-icon-arrow-right-solid"></i>,
1778	},
1779	{
1780	label: "Double Chevron",
1781	value: "angles-right-solid",
1782	icon: <i className="sp-icon-angles-right-solid"></i>,
1783	},
1784	]}
1785	/>
1786	<SPRangeControl
1787	label={__("Icon Gap", "post-carousel")}
1788	attributes={readMoreIconGap}
1789	attributesKey={"readMoreIconGap"}
1790	setAttributes={setAttributes}
1791	units={["px"]}
1792	max={50}
1793	defaultValue={{ unit: "px", value: 4 }}
1794	/>
1795	</>
1796	)}
1797	<SPToggleGroupControl
1798	attributes={readMoreButtonStyleType}
1799	items={[
1800	{ label: "Normal", value: "color" },
1801	{ label: "Hover", value: "hover" },
1802	]}
1803	onClick={(val) => setReadMoreButtonStyleType(val)}
1804	/>
1805	{"color" === readMoreButtonStyleType ? (
1806	<>
1807	<SpColorPicker
1808	label={__("Color", "post-carousel")}
1809	value={readMoreColor.color}
1810	onChange={(newColor) =>
1811	setAttributes({
1812	readMoreColor: {
1813	...readMoreColor,
1814	color: newColor,
1815	},
1816	})
1817	}
1818	defaultColor="#4E4F52"
1819	/>
1820	{["post-list-two"].includes(blockName) && (
1821	<SpColorPicker
1822	label={__("Text Link Color", "post-carousel")}
1823	value={readMoreTextColor.color}
1824	onChange={(newColor) =>
1825	setAttributes({
1826	readMoreTextColor: {
1827	...readMoreTextColor,
1828	color: newColor,
1829	},
1830	})
1831	}
1832	defaultColor="#4E4F52"
1833	/>
1834	)}
1835	{/* { [ 'post-grid-six' ].includes( blockName ) && (
1836	<>
1837	<SpColorPicker
1838	label={ __(
1839	'Large Item Color',
1840	'post-carousel'
1841	) }
1842	value={ largeItemReadMoreColor.color }
1843	onChange={ ( newColor ) =>
1844	setAttributes( {
1845	largeItemReadMoreColor: {
1846	...largeItemReadMoreColor,
1847	color: newColor,
1848	},
1849	} )
1850	}
1851	defaultColor="#4E4F52"
1852	/>
1853	</>
1854	) } */}
1855	</>
1856	) : (
1857	<>
1858	<SpColorPicker
1859	label={__("Color", "post-carousel")}
1860	value={readMoreColor.hoverColor}
1861	onChange={(newColor) =>
1862	setAttributes({
1863	readMoreColor: {
1864	...readMoreColor,
1865	hoverColor: newColor,
1866	},
1867	})
1868	}
1869	defaultColor="#FFFFFF"
1870	/>
1871	{["post-list-two"].includes(blockName) && (
1872	<SpColorPicker
1873	label={__("Text Link Color", "post-carousel")}
1874	value={readMoreTextColor.hover}
1875	onChange={(newColor) =>
1876	setAttributes({
1877	readMoreTextColor: {
1878	...readMoreTextColor,
1879	hover: newColor,
1880	},
1881	})
1882	}
1883	defaultColor="#4E4F52"
1884	/>
1885	)}
1886	{/* { [ 'post-grid-six' ].includes( blockName ) && (
1887	<>
1888	<SpColorPicker
1889	label={ __(
1890	'Large Item Color',
1891	'post-carousel'
1892	) }
1893	value={ largeItemReadMoreColor.hoverColor }
1894	onChange={ ( newColor ) =>
1895	setAttributes( {
1896	largeItemReadMoreColor: {
1897	...largeItemReadMoreColor,
1898	hoverColor: newColor,
1899	},
1900	} )
1901	}
1902	defaultColor="#FFFFFF"
1903	/>
1904	</>
1905	) } */}
1906	</>
1907	)}
1908	{readMoreButtonType !== "link" && (
1909	<>
1910	<Background
1911	label={__("Background Type", "post-carousel")}
1912	colorLabel="Solid Color"
1913	defaultColor={readMoreButtonStyleType === "color" ? "#FFFFFF" : "#333333"}
1914	attributes={readMoreBg}
1915	attributesKey={"readMoreBg"}
1916	setAttributes={setAttributes}
1917	colorType={readMoreButtonStyleType}
1918	items={[
1919	{
1920	label: <TransparentIcon />,
1921	value: "transparent",
1922	tooltip: "Transparent",
1923	},
1924	{
1925	label: <BgIcon />,
1926	value: "bgColor",
1927	tooltip: "Solid",
1928	},
1929	{
1930	label: <GradientIcon />,
1931	value: "gradient",
1932	tooltip: "Gradient",
1933	},
1934	]}
1935	/>
1936	{/* { [ 'post-grid-six' ].includes( blockName ) && (
1937	<Background
1938	label={ __(
1939	'Large Item Background Type',
1940	'smart-post-show'
1941	) }
1942	colorLabel="Solid Color"
1943	defaultColor={
1944	readMoreButtonStyleType === 'color'
1945	? '#FFFFFF'
1946	: '#333333'
1947	}
1948	attributes={ largeItemReadMoreBg }
1949	attributesKey={ 'largeItemReadMoreBg' }
1950	setAttributes={ setAttributes }
1951	colorType={ readMoreButtonStyleType }
1952	items={ [
1953	{
1954	label: <TransparentIcon />,
1955	value: 'transparent',
1956	tooltip: 'Transparent',
1957	},
1958	{
1959	label: <BgIcon />,
1960	value: 'bgColor',
1961	tooltip: 'Solid',
1962	},
1963	{
1964	label: <GradientIcon />,
1965	value: 'gradient',
1966	tooltip: 'Gradient',
1967	},
1968	] }
1969	/>
1970	) } */}
1971	{"color" === readMoreButtonStyleType ? (
1972	<>
1973	<Border
1974	attributes={{
1975	border: readMoreButtonBorder,
1976	borderWidth: readMoreButtonBorderWidth,
1977	}}
1978	setAttributes={setAttributes}
1979	attributesKey={{
1980	border: "readMoreButtonBorder",
1981	borderWidth: "readMoreButtonBorderWidth",
1982	}}
1983	defaultColor={{
1984	color: "#333333",
1985	}}
1986	btnType={"normal"}
1987	/>
1988	{/* { [ 'post-grid-six' ].includes( blockName ) && (
1989	<Border
1990	label={ 'Large Item Border' }
1991	attributes={ {
1992	border: largeItemReadMoreButtonBorder,
1993	borderWidth: largeItemReadMoreButtonBorderWidth,
1994	} }
1995	setAttributes={ setAttributes }
1996	attributesKey={ {
1997	border: 'largeItemReadMoreButtonBorder',
1998	borderWidth:
1999	'largeItemReadMoreButtonBorderWidth',
2000	} }
2001	btnType={'normal'}
2002	defaultColor={ {
2003	color: '#333333',
2004	} }
2005	/>
2006	) } */}
2007	<Spacing
2008	label={__("Border Radius", "post-carousel")}
2009	attributes={readMoreButtonBorderRadius}
2010	attributesKey={"readMoreButtonBorderRadius"}
2011	setAttributes={setAttributes}
2012	units={["px", "%", "em"]}
2013	defaultValue={{
2014	unit: "px",
2015	value: {
2016	top: 0,
2017	right: 0,
2018	bottom: 0,
2019	left: 0,
2020	},
2021	}}
2022	indicator={"radius"}
2023	/>
2024	</>
2025	) : (
2026	<>
2027	<Border
2028	attributes={{
2029	border: readMoreButtonBorder,
2030	borderWidth: readMoreButtonBorderWidthHover,
2031	}}
2032	setAttributes={setAttributes}
2033	attributesKey={{
2034	border: "readMoreButtonBorder",
2035	borderWidth: "readMoreButtonBorderWidthHover",
2036	}}
2037	btnType={"hover"}
2038	/>
2039	{/* { [ 'post-grid-six' ].includes( blockName ) && (
2040	<Border
2041	label={ 'Large Item Border' }
2042	attributes={ {
2043	border: largeItemReadMoreButtonBorder,
2044	borderWidth: largeItemReadMoreBtnBorderWidthHover,
2045	} }
2046	setAttributes={ setAttributes }
2047	attributesKey={ {
2048	border: 'largeItemReadMoreButtonBorder',
2049	borderWidth:
2050	'largeItemReadMoreBtnBorderWidthHover',
2051	} }
2052	btnType={'hover'}
2053	defaultColor={ {
2054	color: '#333333',
2055	} }
2056	/>
2057	) } */}
2058	<Spacing
2059	label={__("Border Radius", "post-carousel")}
2060	attributes={readMoreButtonBorderRadiusHover}
2061	attributesKey={"readMoreButtonBorderRadiusHover"}
2062	setAttributes={setAttributes}
2063	units={["px", "%", "em"]}
2064	defaultValue={{
2065	unit: "px",
2066	value: {
2067	top: 0,
2068	right: 0,
2069	bottom: 0,
2070	left: 0,
2071	},
2072	}}
2073	indicator={"radius"}
2074	/>
2075	</>
2076	)}
2077	<Divider position={"sp-w-100pct bottom"} />
2078	<Spacing
2079	label={__("Padding", "post-carousel")}
2080	attributes={readMoreButtonPadding}
2081	attributesKey={"readMoreButtonPadding"}
2082	setAttributes={setAttributes}
2083	units={["px", "%", "em"]}
2084	defaultValue={{
2085	unit: "px",
2086	value: {
2087	top: 8,
2088	right: 8,
2089	bottom: 8,
2090	left: 12,
2091	},
2092	}}
2093	/>
2094	</>
2095	)}
2096	<Spacing
2097	label={__("Margin", "post-carousel")}
2098	attributes={readMoreButtonMargin}
2099	attributesKey={"readMoreButtonMargin"}
2100	setAttributes={setAttributes}
2101	units={["px", "%", "em"]}
2102	defaultValue={{
2103	unit: "px",
2104	value: {
2105	top: 8,
2106	right: 0,
2107	bottom: 8,
2108	left: 0,
2109	},
2110	}}
2111	/>
2112	</>
2113	);
2114	};
2115	export const SocialShareStyleTab = ({ attributes, setAttributes }) => {
2116	const {
2117	socialShareIconSize,
2118	socialShareIconType,
2119	socialShareCustomColor,
2120	socialShareCustomBgColor,
2121	socialShareBorderRadius,
2122	socialShareSpaceBetween,
2123	// socialShareHeight,
2124	// socialShareWidth,
2125	socialShareMargin,
2126	// socialIconOnly,
2127	socialShareBorder,
2128	socialShareBorderWidth,
2129	socialSharePadding,
2130	socialIconDisplayType,
2131	socialPopupShareColor,
2132	socialPopupShareBGColor,
2133	socialPopupCountColor,
2134	socialPopupContainerBGColor,
2135	socialSharePopupBorder,
2136	socialSharePopupBorderWidth,
2137	socialSharePopupBorderRadius,
2138	socialShareBoxShadow,
2139	socialShareBoxShadowValue,
2140	socialPopupBoxShadow,
2141	socialPopupBoxShadowValue,
2142	socialPopupPadding,
2143	socialShareIconPosition,
2144	} = attributes;
2145	const [socialColorState, setSocialColorState] = useState("color");
2146	const [popupColorState, setPopupColorState] = useState("color");
2147
2148	return (
2149	<>
2150	{/* { 'original' === socialShareIconType && (
2151	<>
2152	<Toggle
2153	label={ __( 'Icon Only', 'post-carousel' ) }
2154	attributes={ socialIconOnly ) }
2155	attributesKey={ 'socialIconOnly' }
2156	setAttributes={ setAttributes }
2157	/>
2158	</>
2159	) } */}
2160	<SPRangeControl
2161	label={__("Icon Size", "post-carousel")}
2162	attributes={socialShareIconSize}
2163	attributesKey={"socialShareIconSize"}
2164	setAttributes={setAttributes}
2165	units={["px", "%", "Em"]}
2166	defaultValue={{
2167	unit: "px",
2168	value: 16,
2169	}}
2170	max={60}
2171	/>
2172	<SPToggleGroupControl
2173	label={__("Icon Type", "post-carousel")}
2174	attributes={socialShareIconType}
2175	attributesKey={"socialShareIconType"}
2176	setAttributes={setAttributes}
2177	items={[
2178	{ label: "Original", value: "original" },
2179	{ label: "Custom (Pro)", value: "custom", disabled: "disabled" },
2180	]}
2181	/>
2182
2183	{/* { ( ! socialIconOnly \|\| 'custom' === socialShareIconType ) && (
2184	<>
2185	<SPRangeControl
2186	label={ __( 'Height', 'post-carousel' ) }
2187	attributes={ socialShareHeight }
2188	attributesKey={ 'socialShareHeight' }
2189	setAttributes={ setAttributes }
2190	units={ [ 'px', '%', 'Em' ] }
2191	max={ 60 }
2192	defaultValue={ {
2193	unit: 'px',
2194	value: 30,
2195	} }
2196	/>
2197	<SPRangeControl
2198	label={ __( 'Width', 'post-carousel' ) }
2199	attributes={ socialShareWidth }
2200	attributesKey={ 'socialShareWidth' }
2201	setAttributes={ setAttributes }
2202	units={ [ 'px', '%', 'Em' ] }
2203	max={ 60 }
2204	defaultValue={ {
2205	unit: 'px',
2206	value: 30,
2207	} }
2208	/>
2209	</>
2210	) } */}
2211	{socialShareIconType && ("custom" === socialShareIconType \|\| "popup-share" === socialIconDisplayType) && (
2212	<>
2213	<SPToggleGroupControl
2214	attributes={socialColorState}
2215	items={[
2216	{ label: "Normal", value: "color" },
2217	{ label: "Hover", value: "hover" },
2218	]}
2219	onClick={(val) => setSocialColorState(val)}
2220	/>
2221	</>
2222	)}
2223	{socialColorState === "color" ? (
2224	<>
2225	{"custom" === socialShareIconType && (
2226	<>
2227	<SpColorPicker
2228	label={__("Social Icon Color", "post-carousel")}
2229	value={socialShareCustomColor.color}
2230	onChange={(newColor) =>
2231	setAttributes({
2232	socialShareCustomColor: {
2233	...socialShareCustomColor,
2234	color: newColor,
2235	},
2236	})
2237	}
2238	defaultColor="#FFFFFF"
2239	/>
2240	<SpColorPicker
2241	label={__("Social Background Color", "post-carousel")}
2242	value={socialShareCustomBgColor.color}
2243	onChange={(newColor) =>
2244	setAttributes({
2245	socialShareCustomBgColor: {
2246	...socialShareCustomBgColor,
2247	color: newColor,
2248	},
2249	})
2250	}
2251	defaultColor="#4e4f52"
2252	/>
2253	</>
2254	)}
2255	{"popup-share" === socialIconDisplayType && (
2256	<>
2257	<SpColorPicker
2258	label={__("Color", "post-carousel")}
2259	value={socialPopupShareColor.color}
2260	onChange={(newColor) =>
2261	setAttributes({
2262	socialPopupShareColor: {
2263	...socialPopupShareColor,
2264	color: newColor,
2265	},
2266	})
2267	}
2268	/>
2269	{/* <SpColorPicker
2270	label={__("Background Color t", "post-carousel")}
2271	value={socialPopupShareBGColor.color}
2272	onChange={(newColor) =>
2273	setAttributes({
2274	socialPopupShareBGColor: {
2275	...socialPopupShareBGColor,
2276	color: newColor,
2277	},
2278	})
2279	}
2280	/> */}
2281	<SpColorPicker
2282	label={__("Popup Background Color", "post-carousel")}
2283	value={socialPopupContainerBGColor.color}
2284	onChange={(newColor) =>
2285	setAttributes({
2286	socialPopupContainerBGColor: {
2287	...socialPopupContainerBGColor,
2288	color: newColor,
2289	},
2290	})
2291	}
2292	/>
2293	</>
2294	)}
2295	</>
2296	) : (
2297	<>
2298	{"custom" === socialShareIconType && (
2299	<>
2300	<SpColorPicker
2301	label={__("Social Icon Color", "post-carousel")}
2302	value={socialShareCustomColor.hoverColor}
2303	onChange={(newColor) =>
2304	setAttributes({
2305	socialShareCustomColor: {
2306	...socialShareCustomColor,
2307	hoverColor: newColor,
2308	},
2309	})
2310	}
2311	/>
2312	<SpColorPicker
2313	label={__("Social Background Color", "post-carousel")}
2314	value={socialShareCustomBgColor.hoverColor}
2315	onChange={(newColor) =>
2316	setAttributes({
2317	socialShareCustomBgColor: {
2318	...socialShareCustomBgColor,
2319	hoverColor: newColor,
2320	},
2321	})
2322	}
2323	/>
2324	</>
2325	)}
2326	{"popup-share" === socialIconDisplayType && (
2327	<>
2328	<SpColorPicker
2329	label={__("Color", "post-carousel")}
2330	value={socialPopupShareColor.hoverColor}
2331	onChange={(newColor) =>
2332	setAttributes({
2333	socialPopupShareColor: {
2334	...socialPopupShareColor,
2335	hoverColor: newColor,
2336	},
2337	})
2338	}
2339	/>
2340	{/* <SpColorPicker
2341	label={__("Background Color", "post-carousel")}
2342	value={socialPopupShareBGColor.hoverColor}
2343	onChange={(newColor) =>
2344	setAttributes({
2345	socialPopupShareBGColor: {
2346	...socialPopupShareBGColor,
2347	hoverColor: newColor,
2348	},
2349	})
2350	}
2351	/> */}
2352	{/* <SpColorPicker
2353	label={ __(
2354	'PopupBackground Color',
2355	'post-carousel'
2356	) }
2357	value={ socialPopupContainerBGColor.hoverColor }
2358	onChange={ ( newColor ) =>
2359	setAttributes( {
2360	socialPopupContainerBGColor: {
2361	...socialPopupContainerBGColor,
2362	hoverColor: newColor,
2363	},
2364	} )
2365	}
2366	/> */}
2367	</>
2368	)}
2369	</>
2370	)}
2371	<Divider position={"sp-w-100pct bottom"} />
2372	<Border
2373	label={"Border"}
2374	attributes={{
2375	border: socialShareBorder,
2376	borderWidth: socialShareBorderWidth,
2377	}}
2378	setAttributes={setAttributes}
2379	attributesKey={{
2380	border: "socialShareBorder",
2381	borderWidth: "socialShareBorderWidth",
2382	}}
2383	/>
2384	{"popup-share" === socialIconDisplayType && (
2385	<Border
2386	label={__("Popup Border", "post-carousel")}
2387	attributes={{
2388	border: socialSharePopupBorder,
2389	borderWidth: socialSharePopupBorderWidth,
2390	}}
2391	setAttributes={setAttributes}
2392	attributesKey={{
2393	border: "socialSharePopupBorder",
2394	borderWidth: "socialSharePopupBorderWidth",
2395	}}
2396	/>
2397	)}
2398	<Spacing
2399	label={__("Border Radius", "post-carousel")}
2400	attributes={socialShareBorderRadius}
2401	attributesKey={"socialShareBorderRadius"}
2402	setAttributes={setAttributes}
2403	units={["px", "%", "Em"]}
2404	labelItem={{
2405	top: __("Top", "post-carousel"),
2406	right: __("Right", "post-carousel"),
2407	bottom: __("Bottom", "post-carousel"),
2408	left: __("Left", "post-carousel"),
2409	}}
2410	defaultValue={{
2411	unit: "px",
2412	value: {
2413	top: 3,
2414	right: 3,
2415	bottom: 3,
2416	left: 3,
2417	},
2418	}}
2419	indicator={"radius"}
2420	/>
2421	{"popup-share" === socialIconDisplayType && (
2422	<Spacing
2423	label={__("Popup Border Radius", "post-carousel")}
2424	attributes={socialSharePopupBorderRadius}
2425	attributesKey={"socialSharePopupBorderRadius"}
2426	setAttributes={setAttributes}
2427	units={["px", "%", "Em"]}
2428	labelItem={{
2429	top: __("Top", "post-carousel"),
2430	right: __("Right", "post-carousel"),
2431	bottom: __("Bottom", "post-carousel"),
2432	left: __("Left", "post-carousel"),
2433	}}
2434	defaultValue={{
2435	unit: "px",
2436	value: {
2437	top: 3,
2438	right: 3,
2439	bottom: 3,
2440	left: 3,
2441	},
2442	}}
2443	/>
2444	)}
2445	{"popup-share" !== socialIconDisplayType && (
2446	<SPRangeControl
2447	label={__("Space Between Icon", "post-carousel")}
2448	attributes={socialShareSpaceBetween}
2449	attributesKey={"socialShareSpaceBetween"}
2450	setAttributes={setAttributes}
2451	units={["px"]}
2452	max={60}
2453	defaultValue={{
2454	unit: "px",
2455	value: 8,
2456	}}
2457	/>
2458	)}
2459	{"popup-share" === socialIconDisplayType && (
2460	<>
2461	<Toggle
2462	label={__("Box Shadow", "post-carousel")}
2463	attributes={socialShareBoxShadow}
2464	attributesKey={"socialShareBoxShadow"}
2465	setAttributes={setAttributes}
2466	/>
2467	{socialShareBoxShadow && (
2468	<BoxShadow
2469	label={__("Box Shadow Value", "post-carousel")}
2470	attributes={socialShareBoxShadowValue}
2471	attributesKey={"socialShareBoxShadowValue"}
2472	setAttributes={setAttributes}
2473	/>
2474	)}
2475	<Toggle
2476	label={__("Popup Box Shadow", "post-carousel")}
2477	attributes={socialPopupBoxShadow}
2478	attributesKey={"socialPopupBoxShadow"}
2479	setAttributes={setAttributes}
2480	/>
2481	{socialPopupBoxShadow && (
2482	<BoxShadow
2483	label={__("Popup Box Shadow Value", "post-carousel")}
2484	attributes={socialPopupBoxShadowValue}
2485	attributesKey={"socialPopupBoxShadowValue"}
2486	setAttributes={setAttributes}
2487	/>
2488	)}
2489	</>
2490	)}
2491	<Spacing
2492	label={__("Padding", "post-carousel")}
2493	attributes={socialSharePadding}
2494	attributesKey={"socialSharePadding"}
2495	setAttributes={setAttributes}
2496	units={["px", "%", "Em"]}
2497	defaultValue={{
2498	unit: "px",
2499	value: {
2500	top: 8,
2501	right: 8,
2502	bottom: 8,
2503	left: 8,
2504	},
2505	}}
2506	/>
2507	{"popup-share" === socialIconDisplayType && (
2508	<Spacing
2509	label={__("Popup Padding", "post-carousel")}
2510	attributes={socialPopupPadding}
2511	attributesKey={"socialPopupPadding"}
2512	setAttributes={setAttributes}
2513	units={["px", "%", "Em"]}
2514	defaultValue={{
2515	unit: "px",
2516	value: {
2517	top: 8,
2518	right: 8,
2519	bottom: 8,
2520	left: 8,
2521	},
2522	}}
2523	/>
2524	)}
2525	{("over-thumbnail" === socialShareIconPosition \|\| "inline-icon" === socialIconDisplayType) && (
2526	<Spacing
2527	label={__("Margin", "post-carousel")}
2528	attributes={socialShareMargin}
2529	attributesKey={"socialShareMargin"}
2530	setAttributes={setAttributes}
2531	units={["px", "%", "Em"]}
2532	defaultValue={{
2533	unit: "px",
2534	value: {
2535	top: 4,
2536	right: 0,
2537	bottom: 0,
2538	left: 0,
2539	},
2540	}}
2541	/>
2542	)}
2543	</>
2544	);
2545	};
2546	export const AdvancedStyleTab = ({ attributes, setAttributes }) => {
2547	const {
2548	advancedBg,
2549	advancedBorderStyle,
2550	advancedBorderStyleWidth,
2551	advancedBorderRadius,
2552	advancedPadding,
2553	advancedMargin,
2554	advancedBoxShadow,
2555	advancedBoxShadowEnable,
2556	advancedBorderStyleWidthHover,
2557	advancedBorderRadiusHover,
2558	blockName,
2559	} = attributes;
2560	const [advancedButtonStyleType, setAdvancedButtonStyleType] = useState("color");
2561
2562	return (
2563	<>
2564	<SPToggleGroupControl
2565	attributes={advancedButtonStyleType}
2566	items={[
2567	{ label: "Normal", value: "color" },
2568	{ label: "Hover", value: "hover" },
2569	]}
2570	onClick={(val) => setAdvancedButtonStyleType(val)}
2571	/>
2572	<Background
2573	label={__("Background Type", "post-carousel")}
2574	colorLabel="Solid Color"
2575	defaultColor="#E9F4FF"
2576	attributes={advancedBg}
2577	attributesKey={"advancedBg"}
2578	setAttributes={setAttributes}
2579	colorType={advancedButtonStyleType}
2580	items={[
2581	{
2582	label: <TransparentIcon />,
2583	value: "transparent",
2584	tooltip: "Transparent",
2585	},
2586	{ label: <BgIcon />, value: "bgColor", tooltip: "Solid" },
2587	{
2588	label: <GradientIcon />,
2589	value: "gradient",
2590	tooltip: "Gradient",
2591	},
2592	]}
2593	/>
2594	{!["post-slider", "post-slider-two", "post-thumbnail-slider", "thumbnail-slider-two"].includes(
2595	blockName
2596	) && (
2597	<>
2598	{"color" === advancedButtonStyleType ? (
2599	<Fragment key={ "normal" }>
2600	<Border
2601	attributes={{
2602	border: advancedBorderStyle,
2603	borderWidth: advancedBorderStyleWidth,
2604	}}
2605	setAttributes={setAttributes}
2606	attributesKey={{
2607	border: "advancedBorderStyle",
2608	borderWidth: "advancedBorderStyleWidth",
2609	}}
2610	btnType={"normal"}
2611	/>
2612	<Spacing
2613	label={__("Border Radius", "post-carousel")}
2614	attributes={advancedBorderRadius}
2615	attributesKey={"advancedBorderRadius"}
2616	setAttributes={setAttributes}
2617	units={["px", "%", "em"]}
2618	defaultValue={{
2619	unit: "px",
2620	value: {
2621	top: "0",
2622	right: "0",
2623	bottom: "0",
2624	left: "0",
2625	},
2626	}}
2627	indicator={"radius"}
2628	/>
2629	</Fragment>
2630	) : (
2631	<Fragment key={ "hover" }>
2632	<Border
2633	attributes={{
2634	border: advancedBorderStyle,
2635	borderWidth: advancedBorderStyleWidthHover,
2636	}}
2637	setAttributes={setAttributes}
2638	attributesKey={{
2639	border: "advancedBorderStyle",
2640	borderWidth: "advancedBorderStyleWidthHover",
2641	}}
2642	btnType={"hover"}
2643	/>
2644	<Spacing
2645	label={__("Border Radius", "post-carousel")}
2646	attributes={advancedBorderRadiusHover}
2647	attributesKey={"advancedBorderRadiusHover"}
2648	setAttributes={setAttributes}
2649	units={["px", "%", "em"]}
2650	defaultValue={{
2651	unit: "px",
2652	value: {
2653	top: "0",
2654	right: "0",
2655	bottom: "0",
2656	left: "0",
2657	},
2658	}}
2659	indicator={"radius"}
2660	/>
2661	</Fragment>
2662	)}
2663	</>
2664	)}
2665	<Divider position={"sp-w-100pct bottom"} />
2666	<Toggle
2667	label={__("Enable Box Shadow", "post-carousel")}
2668	attributes={advancedBoxShadowEnable}
2669	attributesKey={"advancedBoxShadowEnable"}
2670	setAttributes={setAttributes}
2671	/>
2672	{advancedBoxShadowEnable && (
2673	<BoxShadow
2674	label={__("Box Shadow", "post-carousel")}
2675	attributes={advancedBoxShadow}
2676	attributesKey={"advancedBoxShadow"}
2677	setAttributes={setAttributes}
2678	/>
2679	)}
2680	<Spacing
2681	label={__("Padding", "post-carousel")}
2682	attributes={advancedPadding}
2683	attributesKey={"advancedPadding"}
2684	setAttributes={setAttributes}
2685	units={["px", "%", "em"]}
2686	defaultValue={{
2687	unit: "px",
2688	value: {
2689	top: "",
2690	right: "",
2691	bottom: "",
2692	left: "",
2693	},
2694	}}
2695	/>
2696	<Spacing
2697	label={__("Margin", "post-carousel")}
2698	attributes={advancedMargin}
2699	attributesKey={"advancedMargin"}
2700	setAttributes={setAttributes}
2701	units={["px", "%", "em"]}
2702	defaultValue={{
2703	unit: "px",
2704	value: {
2705	top: "8",
2706	right: "0",
2707	bottom: "8",
2708	left: "0",
2709	},
2710	}}
2711	/>
2712	</>
2713	);
2714	};
2715	export const CategoryStyleTab = ({ attributes, setAttributes }) => {
2716	const {
2717	catTabCategoryTypography,
2718	catTabCategoryFontSize,
2719	catTabCategoryLetterSpacing,
2720	catTabCategoryLineHeight,
2721	catTabCategoryColor,
2722	catTabCategoryBg,
2723	catTabCategoryBorder,
2724	catTabCategoryBorderWidth,
2725	catTabCategoryBorderRadius,
2726	catTabCategorySpaceBetween,
2727	catTabCategoryPadding,
2728	catTabCategoryMargin,
2729	blockLayoutName,
2730	thumbnailItemsCateColor,
2731	catTabCategoryBarColor,
2732	catTabCategoryWordSpacing,
2733	catTabCategoryBorderWidthHover,
2734	catTabCategoryBorderRadiusHover,
2735	catTabCategoryGlobalTypography,
2736	} = attributes;
2737
2738	const [catTabBtnState, setCatTabBtnState] = useState("color");
2739
2740	return (
2741	<>
2742	<TypographyNew
2743	attributes={{
2744	family: catTabCategoryTypography,
2745	familyKey: "catTabCategoryTypography",
2746	fontSize: catTabCategoryFontSize,
2747	fontSizeKey: "catTabCategoryFontSize",
2748	fontSpacing: catTabCategoryLetterSpacing,
2749	fontSpacingKey: "catTabCategoryLetterSpacing",
2750	lineHeight: catTabCategoryLineHeight,
2751	lineHeightKey: "catTabCategoryLineHeight",
2752	wordSpacing: catTabCategoryWordSpacing,
2753	wordSpacingKey: "catTabCategoryWordSpacing",
2754	globalTypo: catTabCategoryGlobalTypography,
2755	globalTypoKey: "catTabCategoryGlobalTypography",
2756	}}
2757	setAttributes={setAttributes}
2758	fontSizeDefault={{ unit: "px", value: 12 }}
2759	spacingDefaultValue={{ unit: "px", value: 0 }}
2760	lineDefaultValue={{ unit: "px", value: 14.4 }}
2761	/>
2762	{[
2763	"thumbnail-slider-two-layout-three",
2764	"thumbnail-slider-two-layout-four",
2765	"thumbnail-slider-two-layout-five",
2766	].includes(blockLayoutName) && (
2767	<SpColorPicker
2768	label={__("Bar Color", "post-carousel")}
2769	value={catTabCategoryBarColor}
2770	onChange={(newColor) => setAttributes({ catTabCategoryBarColor: newColor })}
2771	defaultColor="#FFFFFF"
2772	/>
2773	)}
2774	<SPToggleGroupControl
2775	attributes={catTabBtnState}
2776	items={[
2777	{ label: "Normal", value: "color" },
2778	{ label: "Hover", value: "hover" },
2779	]}
2780	onClick={(newState) => setCatTabBtnState(newState)}
2781	/>
2782	{"color" === catTabBtnState ? (
2783	<>
2784	<SpColorPicker
2785	label={__("Color", "post-carousel")}
2786	value={catTabCategoryColor.color}
2787	onChange={(newColor) =>
2788	setAttributes({
2789	catTabCategoryColor: {
2790	...catTabCategoryColor,
2791	color: newColor,
2792	},
2793	})
2794	}
2795	defaultColor="#FFFFFF"
2796	/>
2797	{blockLayoutName &&
2798	inArray(["thumbnail-slider-layout-three", "thumbnail-slider-layout-four"], blockLayoutName) && (
2799	<SpColorPicker
2800	label={__("Thumbnails Color", "post-carousel")}
2801	value={thumbnailItemsCateColor.color}
2802	onChange={(newColor) =>
2803	setAttributes({
2804	thumbnailItemsCateColor: {
2805	...thumbnailItemsCateColor,
2806	color: newColor,
2807	},
2808	})
2809	}
2810	defaultColor="#FFFFFF"
2811	/>
2812	)}
2813	</>
2814	) : (
2815	<>
2816	<SpColorPicker
2817	label={__("Hover Color", "post-carousel")}
2818	value={catTabCategoryColor.hoverColor}
2819	onChange={(newColor) =>
2820	setAttributes({
2821	catTabCategoryColor: {
2822	...catTabCategoryColor,
2823	hoverColor: newColor,
2824	},
2825	})
2826	}
2827	defaultColor="#000000"
2828	/>
2829	{blockLayoutName &&
2830	inArray(["thumbnail-slider-layout-three", "thumbnail-slider-layout-four"], blockLayoutName) && (
2831	<SpColorPicker
2832	label={__("Thumbnails Hover Color", "post-carousel")}
2833	value={thumbnailItemsCateColor.hoverColor}
2834	onChange={(newColor) =>
2835	setAttributes({
2836	thumbnailItemsCateColor: {
2837	...thumbnailItemsCateColor,
2838	hoverColor: newColor,
2839	},
2840	})
2841	}
2842	defaultColor="#000000"
2843	/>
2844	)}
2845	</>
2846	)}
2847	{![
2848	"thumbnail-slider-two-layout-three",
2849	"thumbnail-slider-two-layout-four",
2850	"thumbnail-slider-two-layout-five",
2851	].includes(blockLayoutName) && (
2852	<Background
2853	label={__("Background Type", "post-carousel")}
2854	colorLabel={__("Solid Color", "post-carousel")}
2855	attributes={catTabCategoryBg}
2856	attributesKey={"catTabCategoryBg"}
2857	setAttributes={setAttributes}
2858	defaultColor={"#333333"}
2859	colorType={ catTabBtnState }
2860	items={[
2861	{
2862	label: <TransparentIcon />,
2863	value: "transparent",
2864	tooltip: "Transparent",
2865	},
2866	{
2867	label: <BgIcon />,
2868	value: "bgColor",
2869	tooltip: "Solid",
2870	},
2871	{
2872	label: <GradientIcon />,
2873	value: "gradient",
2874	tooltip: "Gradient",
2875	},
2876	]}
2877	/>
2878	)}
2879
2880	{"color" === catTabBtnState ? (
2881	<Fragment key={ catTabBtnState }>
2882	<Border
2883	label={__("Border", "post-carousel")}
2884	attributes={{
2885	border: catTabCategoryBorder,
2886	borderWidth: catTabCategoryBorderWidth,
2887	}}
2888	attributesKey={{
2889	border: "catTabCategoryBorder",
2890	borderWidth: "catTabCategoryBorderWidth",
2891	}}
2892	setAttributes={setAttributes}
2893	btnType={"normal"}
2894	/>
2895	<Spacing
2896	label={__("Border Radius", "post-carousel")}
2897	attributes={catTabCategoryBorderRadius}
2898	attributesKey={"catTabCategoryBorderRadius"}
2899	setAttributes={setAttributes}
2900	units={["px", "%", "em"]}
2901	defaultValue={{
2902	unit: "px",
2903	value: {
2904	top: 0,
2905	right: 0,
2906	bottom: 0,
2907	left: 0,
2908	},
2909	}}
2910	indicator={"radius"}
2911	/>
2912	</Fragment>
2913	) : (
2914	<Fragment key={ catTabBtnState }>
2915	<Border
2916	label={__("Border", "post-carousel")}
2917	attributes={{
2918	border: catTabCategoryBorder,
2919	borderWidth: catTabCategoryBorderWidthHover,
2920	}}
2921	attributesKey={{
2922	border: "catTabCategoryBorder",
2923	borderWidth: "catTabCategoryBorderWidthHover",
2924	}}
2925	setAttributes={setAttributes}
2926	btnType={"hover"}
2927	/>
2928	<Spacing
2929	label={__("Border Radius", "post-carousel")}
2930	attributes={catTabCategoryBorderRadiusHover}
2931	attributesKey={"catTabCategoryBorderRadiusHover"}
2932	setAttributes={setAttributes}
2933	units={["px", "%", "em"]}
2934	defaultValue={{
2935	unit: "px",
2936	value: {
2937	top: 0,
2938	right: 0,
2939	bottom: 0,
2940	left: 0,
2941	},
2942	}}
2943	indicator={"radius"}
2944	/>{" "}
2945	</Fragment>
2946	)}
2947	<Divider position={"sp-w-100pct bottom"} />
2948	<SPRangeControl
2949	label={__("Space Between Items", "post-carousel")}
2950	attributes={catTabCategorySpaceBetween}
2951	attributesKey={"catTabCategorySpaceBetween"}
2952	setAttributes={setAttributes}
2953	units={["px"]}
2954	max={50}
2955	defaultValue={{ unit: "px", value: 4 }}
2956	/>
2957	<Spacing
2958	label={__("Padding", "post-carousel")}
2959	attributes={catTabCategoryPadding}
2960	attributesKey={"catTabCategoryPadding"}
2961	setAttributes={setAttributes}
2962	units={["px", "%", "em"]}
2963	defaultValue={{
2964	unit: "px",
2965	value: {
2966	top: "5",
2967	right: "10",
2968	bottom: "5",
2969	left: "10",
2970	},
2971	}}
2972	/>
2973	<Spacing
2974	label={__("Margin", "post-carousel")}
2975	attributes={catTabCategoryMargin}
2976	attributesKey={"catTabCategoryMargin"}
2977	setAttributes={setAttributes}
2978	units={["px", "%", "em"]}
2979	defaultValue={{
2980	unit: "px",
2981	value: {
2982	top: "0",
2983	right: "0",
2984	bottom: "8",
2985	left: "0",
2986	},
2987	}}
2988	/>
2989	</>
2990	);
2991	};
2992
2993	export const PopupDetailsStyleTab = ({ attributes, setAttributes }) => {
2994	const {
2995	popupTitleColor,
2996	popupMetaFieldsColor,
2997	popupExcerptColor,
2998	popupBgColor,
2999	popupOverlayColor,
3000	popupNavArrowBgColor,
3001	popupNavArrowColor,
3002	popupCloseBtnColor,
3003	generalLinkOpen,
3004	popupCloseBtnEnable,
3005	} = attributes;
3006	const [popupDetailsColorType, setPopupDetailsColorType] = useState("normal");
3007	return (
3008	<>
3009	<SpColorPicker
3010	label={__("Title", "post-carousel")}
3011	value={popupTitleColor}
3012	defaultColor="#000"
3013	onChange={(newColor) =>
3014	setAttributes({
3015	popupTitleColor: newColor,
3016	})
3017	}
3018	/>
3019	<SpColorPicker
3020	label={__("Meta Fields", "post-carousel")}
3021	value={popupMetaFieldsColor}
3022	defaultColor="#ddd"
3023	onChange={(newColor) =>
3024	setAttributes({
3025	popupMetaFieldsColor: newColor,
3026	})
3027	}
3028	/>
3029	<SpColorPicker
3030	label={__("Excerpt", "post-carousel")}
3031	value={popupExcerptColor}
3032	defaultColor="#000"
3033	onChange={(newColor) =>
3034	setAttributes({
3035	popupExcerptColor: newColor,
3036	})
3037	}
3038	/>
3039	<SpColorPicker
3040	label={__("Background Color", "post-carousel")}
3041	value={popupBgColor}
3042	defaultColor="#fff"
3043	onChange={(newColor) =>
3044	setAttributes({
3045	popupBgColor: newColor,
3046	})
3047	}
3048	/>
3049	<SpColorPicker
3050	label={__("Overlay Color", "post-carousel")}
3051	value={popupOverlayColor}
3052	defaultColor="#ddd"
3053	onChange={(newColor) =>
3054	setAttributes({
3055	popupOverlayColor: newColor,
3056	})
3057	}
3058	/>
3059	{popupCloseBtnEnable && (
3060	<SPToggleGroupControl
3061	attributes={popupDetailsColorType}
3062	items={[
3063	{ label: "Normal", value: "normal" },
3064	{ label: "Hover", value: "hover" },
3065	]}
3066	onClick={(val) => setPopupDetailsColorType(val)}
3067	/>
3068	)}
3069	{popupCloseBtnEnable && (
3070	<>
3071	{"normal" === popupDetailsColorType ? (
3072	<>
3073	<SpColorPicker
3074	label={__("Close Button", "post-carousel")}
3075	value={popupCloseBtnColor.color}
3076	defaultColor="#FF0000"
3077	onChange={(newColor) =>
3078	setAttributes({
3079	popupCloseBtnColor: {
3080	...popupCloseBtnColor,
3081	color: newColor,
3082	},
3083	})
3084	}
3085	/>
3086	{generalLinkOpen === "multi-popup" && (
3087	<>
3088	<SpColorPicker
3089	label={__("Navigation Arrow", "post-carousel")}
3090	value={popupNavArrowColor.color}
3091	defaultColor="#fff"
3092	onChange={(newColor) =>
3093	setAttributes({
3094	popupNavArrowColor: {
3095	...popupNavArrowColor,
3096	color: newColor,
3097	},
3098	})
3099	}
3100	/>
3101	<SpColorPicker
3102	label={__("Background Color", "post-carousel")}
3103	value={popupNavArrowBgColor.color}
3104	defaultColor="#ddd"
3105	onChange={(newColor) =>
3106	setAttributes({
3107	popupNavArrowBgColor: {
3108	...popupNavArrowBgColor,
3109	color: newColor,
3110	},
3111	})
3112	}
3113	/>
3114	</>
3115	)}
3116	</>
3117	) : (
3118	<>
3119	<SpColorPicker
3120	label={__("Close Button", "post-carousel")}
3121	value={popupCloseBtnColor.hover}
3122	defaultColor=""
3123	onChange={(newColor) =>
3124	setAttributes({
3125	popupCloseBtnColor: {
3126	...popupCloseBtnColor,
3127	hover: newColor,
3128	},
3129	})
3130	}
3131	/>
3132	{generalLinkOpen === "multi-popup" && (
3133	<>
3134	<SpColorPicker
3135	label={__("Navigation Arrow", "post-carousel")}
3136	value={popupNavArrowColor.hover}
3137	defaultColor=""
3138	onChange={(newColor) =>
3139	setAttributes({
3140	popupNavArrowColor: {
3141	...popupNavArrowColor,
3142	hover: newColor,
3143	},
3144	})
3145	}
3146	/>
3147	<SpColorPicker
3148	label={__("Background Color", "post-carousel")}
3149	value={popupNavArrowBgColor.hover}
3150	defaultColor=""
3151	onChange={(newColor) =>
3152	setAttributes({
3153	popupNavArrowBgColor: {
3154	...popupNavArrowBgColor,
3155	hover: newColor,
3156	},
3157	})
3158	}
3159	/>
3160	</>
3161	)}
3162	</>
3163	)}
3164	</>
3165	)}
3166	</>
3167	);
3168	};
3169
3170	export const PaginationStyleTab = ({ attributes, setAttributes }) => {
3171	const {
3172	paginationColor,
3173	paginationBGColor,
3174	paginationBorder,
3175	paginationBorderRadius,
3176	paginationPadding,
3177	paginationMargin,
3178	paginationBorderWidth,
3179	paginationType,
3180	paginationTypography,
3181	paginationFontSize,
3182	paginationLetterSpacing,
3183	paginationLineHeight,
3184	paginationWordSpacing,
3185	paginationGlobalTypography,
3186	} = attributes;
3187
3188	const [paginationColorStyle, setPaginationColorStyle] = useState("normal");
3189
3190	return (
3191	<>
3192	{["load-more", "pagination"].includes(paginationType) && (
3193	<>
3194	<TypographyNew
3195	attributes={{
3196	family: paginationTypography,
3197	familyKey: "paginationTypography",
3198	fontSize: paginationFontSize,
3199	fontSizeKey: "paginationFontSize",
3200	fontSpacing: paginationLetterSpacing,
3201	fontSpacingKey: "paginationLetterSpacing",
3202	lineHeight: paginationLineHeight,
3203	lineHeightKey: "paginationLineHeight",
3204	wordSpacing: paginationWordSpacing,
3205	wordSpacingKey: "paginationWordSpacing",
3206	globalTypo: paginationGlobalTypography,
3207	globalTypoKey: "paginationGlobalTypography",
3208	}}
3209	setAttributes={setAttributes}
3210	spacingDefaultValue={{ unit: "px", value: 0 }}
3211	fontSizeDefault={{ unit: "px", value: 16 }}
3212	lineDefaultValue={{ unit: "px", value: 20 }}
3213	/>
3214	</>
3215	)}
3216	<SPToggleGroupControl
3217	attributes={paginationColorStyle}
3218	items={[
3219	{ label: "Normal", value: "normal" },
3220	{
3221	label: paginationType === "pagination" ? "Active & Hover" : "Hover",
3222	value: "active-hover",
3223	},
3224	]}
3225	onClick={(newValue) => setPaginationColorStyle(newValue)}
3226	/>
3227	{"normal" === paginationColorStyle ? (
3228	<>
3229	<SpColorPicker
3230	label={__("Color", "post-carousel")}
3231	value={paginationColor?.color}
3232	onChange={(newColor) => {
3233	setAttributes({
3234	paginationColor: {
3235	...paginationColor,
3236	color: newColor,
3237	defaultColor: "",
3238	},
3239	});
3240	}}
3241	defaultColor={"#FFFFFF"}
3242	/>
3243	<SpColorPicker
3244	label={__("Background Color", "post-carousel")}
3245	value={paginationBGColor?.color}
3246	onChange={(newColor) =>
3247	setAttributes({
3248	paginationBGColor: {
3249	...paginationBGColor,
3250	color: newColor,
3251	defaultColor: "",
3252	},
3253	})
3254	}
3255	defaultColor={"#333333"}
3256	/>
3257	</>
3258	) : (
3259	<>
3260	<SpColorPicker
3261	label={__(" Hover Color", "post-carousel")}
3262	value={paginationColor?.hoverColor}
3263	onChange={(newColor) =>
3264	setAttributes({
3265	paginationColor: {
3266	...paginationColor,
3267	hoverColor: newColor,
3268	},
3269	})
3270	}
3271	defaultColor={"#333333"}
3272	/>
3273	{/* {paginationType === "pagination" && (
3274	<SpColorPicker
3275	label={__("Active Color", "post-carousel")}
3276	value={paginationColor.activeColor}
3277	onChange={(newColor) =>
3278	setAttributes({
3279	paginationColor: {
3280	...paginationColor,
3281	activeColor: newColor,
3282	},
3283	})
3284	}
3285	defaultColor={"#000000"}
3286	/>
3287	)} */}
3288	<SpColorPicker
3289	label={__("Hover Background Color", "post-carousel")}
3290	value={paginationBGColor.hoverColor}
3291	onChange={(newColor) =>
3292	setAttributes({
3293	paginationBGColor: {
3294	...paginationBGColor,
3295	hoverColor: newColor,
3296	},
3297	})
3298	}
3299	defaultColor={"#FFFFFF00"}
3300	/>
3301	{/* {paginationType === "pagination" && (
3302	<SpColorPicker
3303	label={__("Active Background Color", "post-carousel")}
3304	value={paginationBGColor?.activeColor}
3305	onChange={(newColor) =>
3306	setAttributes({
3307	paginationBGColor: {
3308	...paginationBGColor,
3309	activeColor: newColor,
3310	},
3311	})
3312	}
3313	defaultColor={"#FFFFFF00"}
3314	/>
3315	)} */}
3316	</>
3317	)}
3318	<Divider position={"sp-w-100pct bottom"} />
3319	<Border
3320	attributes={{
3321	border: paginationBorder,
3322	borderWidth: paginationBorderWidth,
3323	}}
3324	attributesKey={{
3325	border: "paginationBorder",
3326	borderWidth: "paginationBorderWidth",
3327	}}
3328	setAttributes={setAttributes}
3329	/>
3330	<Spacing
3331	label={__("Border Radius", "post-carousel")}
3332	attributes={paginationBorderRadius}
3333	attributesKey={"paginationBorderRadius"}
3334	setAttributes={setAttributes}
3335	units={["PX", "%", "EM"]}
3336	labelItem={{
3337	top: "T-Left",
3338	right: "T-Right",
3339	bottom: "B-Right",
3340	left: "B-Left",
3341	}}
3342	defaultValue={{
3343	unit: "px",
3344	value: {
3345	top: 4,
3346	right: 4,
3347	bottom: 4,
3348	left: 4,
3349	},
3350	}}
3351	indicator={"radius"}
3352	/>
3353	{["load-more", "pagination"].includes(paginationType) && (
3354	<Spacing
3355	label={__("Padding", "post-carousel")}
3356	attributes={paginationPadding}
3357	attributesKey={"paginationPadding"}
3358	setAttributes={setAttributes}
3359	units={["px", "%", "em"]}
3360	defaultValue={{
3361	unit: "px",
3362	value: {
3363	top: 0,
3364	right: 8,
3365	bottom: 0,
3366	left: 8,
3367	},
3368	}}
3369	/>
3370	)}
3371	<Spacing
3372	label={__("Margin", "post-carousel")}
3373	attributes={paginationMargin}
3374	attributesKey={"paginationMargin"}
3375	setAttributes={setAttributes}
3376	units={["px", "%", "em"]}
3377	defaultValue={{
3378	unit: "px",
3379	value: {
3380	top: 48,
3381	right: 0,
3382	bottom: 0,
3383	left: 0,
3384	},
3385	}}
3386	/>
3387	</>
3388	);
3389	};
3390
3391	export const CarouselNavArrowStyleTab = ({ attributes, setAttributes }) => {
3392	const {
3393	carouselArrowColor,
3394	carouselArrowBgColor,
3395	carouselArrowBorder,
3396	carouselArrowBorderWidth,
3397	carouselArrowBorderRadius,
3398	carouselBoxShadowEnable,
3399	carouselBoxShadow,
3400	carouselArrowBorderWidthHover,
3401	} = attributes;
3402	const [colorState, setColorState] = useState("normal");
3403	return (
3404	<>
3405	<SPToggleGroupControl
3406	attributes={colorState}
3407	items={[
3408	{ label: "Normal", value: "normal" },
3409	{ label: "Hover", value: "hover" },
3410	]}
3411	onClick={(val) => setColorState(val)}
3412	/>
3413	{"normal" === colorState ? (
3414	<>
3415	<SpColorPicker
3416	label={__("Color", "post-carousel")}
3417	value={carouselArrowColor.color}
3418	onChange={(newColor) =>
3419	setAttributes({
3420	carouselArrowColor: {
3421	...carouselArrowColor,
3422	color: newColor,
3423	},
3424	})
3425	}
3426	defaultColor={"#ffffff"}
3427	/>
3428	<SpColorPicker
3429	label={__("Background Color", "post-carousel")}
3430	value={carouselArrowBgColor.color}
3431	onChange={(newBGColor) =>
3432	setAttributes({
3433	carouselArrowBgColor: {
3434	...carouselArrowBgColor,
3435	color: newBGColor,
3436	},
3437	})
3438	}
3439	defaultColor={"#1A1B1C"}
3440	/>
3441	<Border
3442	attributes={{
3443	border: carouselArrowBorder,
3444	borderWidth: carouselArrowBorderWidth,
3445	}}
3446	attributesKey={{
3447	border: "carouselArrowBorder",
3448	borderWidth: "carouselArrowBorderWidth",
3449	}}
3450	setAttributes={setAttributes}
3451	defaultColor={{ color: "#1A1B1C" }}
3452	btnType={"normal"}
3453	/>
3454	</>
3455	) : (
3456	<>
3457	<SpColorPicker
3458	label={__("Hover Color", "post-carousel")}
3459	value={carouselArrowColor.hoverColor}
3460	onChange={(newColor) =>
3461	setAttributes({
3462	carouselArrowColor: {
3463	...carouselArrowColor,
3464	hoverColor: newColor,
3465	},
3466	})
3467	}
3468	defaultColor={"#1A1B1C"}
3469	/>
3470	<SpColorPicker
3471	label={__("Hover Background Color", "post-carousel")}
3472	value={carouselArrowBgColor.hoverColor}
3473	onChange={(newBGColor) =>
3474	setAttributes({
3475	carouselArrowBgColor: {
3476	...carouselArrowBgColor,
3477	hoverColor: newBGColor,
3478	},
3479	})
3480	}
3481	defaultColor={"#ffffff"}
3482	/>
3483	<Border
3484	attributes={{
3485	border: carouselArrowBorder,
3486	borderWidth: carouselArrowBorderWidthHover,
3487	}}
3488	attributesKey={{
3489	border: "carouselArrowBorder",
3490	borderWidth: "carouselArrowBorderWidthHover",
3491	}}
3492	setAttributes={setAttributes}
3493	defaultColor={{ color: "#1A1B1C", hover: "#1A1B1C" }}
3494	btnType={"hover"}
3495	/>
3496	</>
3497	)}
3498	<Divider position={"sp-w-100pct bottom"} />
3499	<Spacing
3500	label={__("Border Radius", "post-carousel")}
3501	attributes={carouselArrowBorderRadius}
3502	attributesKey={"carouselArrowBorderRadius"}
3503	setAttributes={setAttributes}
3504	units={["px", "%", "em"]}
3505	defaultValue={{
3506	unit: "%",
3507	value: {
3508	top: 50,
3509	right: 50,
3510	bottom: 50,
3511	left: 50,
3512	},
3513	}}
3514	indicator={"radius"}
3515	/>
3516	<Toggle
3517	label={__("Enable Box Shadow", "post-carousel")}
3518	attributes={carouselBoxShadowEnable}
3519	attributesKey={"carouselBoxShadowEnable"}
3520	setAttributes={setAttributes}
3521	/>
3522	{carouselBoxShadowEnable && (
3523	<BoxShadow
3524	label={__("Box Shadow", "post-carousel")}
3525	attributes={carouselBoxShadow}
3526	attributesKey={"carouselBoxShadow"}
3527	setAttributes={setAttributes}
3528	defaultColor={"#4E4F521A"}
3529	/>
3530	)}
3531	</>
3532	);
3533	};
3534
3535	export const CarouselPaginationStyleTab = ({ attributes, setAttributes }) => {
3536	const {
3537	carouselPaginationStyle,
3538	carouselPaginationTextColor,
3539	carouselPaginationColor,
3540	carouselPaginationBorder,
3541	carouselPaginationBorderWidth,
3542	carouselPaginationBorderWidthHover,
3543	} = attributes;
3544
3545	const [colorState, setColorState] = useState("normal");
3546
3547	return (
3548	<>
3549	<SPToggleGroupControl
3550	attributes={colorState}
3551	items={[
3552	{ label: "Normal", value: "normal" },
3553	{
3554	label: carouselPaginationStyle !== "fraction" ? "Active" : "Hover",
3555	value: "activeAndHover",
3556	},
3557	]}
3558	onClick={(newValue) => setColorState(newValue)}
3559	/>
3560	{"normal" === colorState ? (
3561	<>
3562	{(carouselPaginationStyle === "fraction" \|\| carouselPaginationStyle === "numbers") && (
3563	<>
3564	<SpColorPicker
3565	label={__("Text Color", "post-carousel")}
3566	value={carouselPaginationTextColor.color}
3567	onChange={(newColor) =>
3568	setAttributes({
3569	carouselPaginationTextColor: {
3570	...carouselPaginationTextColor,
3571	color: newColor,
3572	},
3573	})
3574	}
3575	defaultColor={"#4e4f52"}
3576	/>
3577	</>
3578	)}
3579	<SpColorPicker
3580	label={__("Background Color", "post-carousel")}
3581	value={carouselPaginationColor.color}
3582	onChange={(newColor) =>
3583	setAttributes({
3584	carouselPaginationColor: {
3585	...carouselPaginationColor,
3586	color: newColor,
3587	},
3588	})
3589	}
3590	defaultColor={"#cacbcf"}
3591	/>
3592	{carouselPaginationStyle !== "scrollbar" && (
3593	<Border
3594	attributes={{
3595	border: carouselPaginationBorder,
3596	borderWidth: carouselPaginationBorderWidth,
3597	}}
3598	btnType="normal"
3599	setAttributes={setAttributes}
3600	attributesKey={{
3601	border: "carouselPaginationBorder",
3602	borderWidth: "carouselPaginationBorderWidth",
3603	}}
3604	/>
3605	)}
3606	</>
3607	) : (
3608	<>
3609	{(carouselPaginationStyle === "fraction" \|\| carouselPaginationStyle === "numbers") && (
3610	<>
3611	<SpColorPicker
3612	label={__("Text Color", "post-carousel")}
3613	value={carouselPaginationTextColor.activeColor}
3614	onChange={(newColor) =>
3615	setAttributes({
3616	carouselPaginationTextColor: {
3617	...carouselPaginationTextColor,
3618	activeColor: newColor,
3619	},
3620	})
3621	}
3622	defaultColor="#4e4f52"
3623	/>
3624	</>
3625	)}
3626	<SpColorPicker
3627	label={__("Background Color", "post-carousel")}
3628	value={carouselPaginationColor.hoverColor}
3629	onChange={(newColor) =>
3630	setAttributes({
3631	carouselPaginationColor: {
3632	...carouselPaginationColor,
3633	hoverColor: newColor,
3634	},
3635	})
3636	}
3637	defaultColor="#4e4f52"
3638	/>
3639	{carouselPaginationStyle !== "scrollbar" && (
3640	<Border
3641	attributes={{
3642	border: carouselPaginationBorder,
3643	borderWidth: carouselPaginationBorderWidthHover,
3644	}}
3645	btnType="hover"
3646	setAttributes={setAttributes}
3647	attributesKey={{
3648	border: "carouselPaginationBorder",
3649	borderWidth: "carouselPaginationBorderWidthHover",
3650	}}
3651	/>
3652	)}
3653	</>
3654	)}
3655	</>
3656	);
3657	};
3658
3659	export const PriceStyleTab = ({ attributes, setAttributes }) => {
3660	const {
3661	priceColor,
3662	discountColor,
3663	priceTypography,
3664	priceFontSize,
3665	priceLatterSpacing,
3666	priceLineHeight,
3667	priceWordSpacing,
3668	} = attributes;
3669	return (
3670	<>
3671	<TypographyNew
3672	attributes={{
3673	family: priceTypography,
3674	familyKey: "priceTypography",
3675	fontSize: priceFontSize,
3676	fontSizeKey: "priceFontSize",
3677	fontSpacing: priceLatterSpacing,
3678	fontSpacingKey: "priceLatterSpacing",
3679	lineHeight: priceLineHeight,
3680	lineHeightKey: "priceLineHeight",
3681	wordSpacing: priceWordSpacing,
3682	wordSpacingKey: "priceWordSpacing",
3683	}}
3684	setAttributes={setAttributes}
3685	spacingDefaultValue={{ unit: "px", value: 0 }}
3686	fontSizeDefault={{ unit: "px", value: 18 }}
3687	lineDefaultValue={{ unit: "px", value: 32 }}
3688	/>
3689	<SpColorPicker
3690	label={__("Price Color", "post-carousel")}
3691	value={priceColor.color}
3692	onChange={(newColor) =>
3693	setAttributes({
3694	priceColor: {
3695	...priceColor,
3696	color: newColor,
3697	},
3698	})
3699	}
3700	/>
3701	<SpColorPicker
3702	label={__("Discount Color", "post-carousel")}
3703	value={discountColor.color}
3704	onChange={(newColor) =>
3705	setAttributes({
3706	discountColor: {
3707	...discountColor,
3708	color: newColor,
3709	},
3710	})
3711	}
3712	/>
3713	</>
3714	);
3715	};
3716
3717	export const RatingStyleTab = ({ attributes, setAttributes }) => {
3718	const { starColor, emptyStarColor, reviewCounterColor } = attributes;
3719	return (
3720	<>
3721	<SpColorPicker
3722	label={__("Star Color", "post-carousel")}
3723	value={starColor.color}
3724	onChange={(newColor) =>
3725	setAttributes({
3726	starColor: {
3727	...starColor,
3728	color: newColor,
3729	},
3730	})
3731	}
3732	/>
3733	<SpColorPicker
3734	label={__("Empty Star Color", "post-carousel")}
3735	value={emptyStarColor.color}
3736	onChange={(newColor) =>
3737	setAttributes({
3738	emptyStarColor: {
3739	...emptyStarColor,
3740	color: newColor,
3741	},
3742	})
3743	}
3744	/>
3745	<SpColorPicker
3746	label={__("Review Counter Color", "post-carousel")}
3747	value={reviewCounterColor.color}
3748	onChange={(newColor) =>
3749	setAttributes({
3750	reviewCounterColor: {
3751	...reviewCounterColor,
3752	color: newColor,
3753	},
3754	})
3755	}
3756	/>
3757	</>
3758	);
3759	};
3760
3761	export const AddToCartStyleTab = ({ attributes, setAttributes }) => {
3762	const {
3763	addToCartBg,
3764	addToCartColor,
3765	addToCartBorder,
3766	addToCartBorderWidth,
3767	addToCartTypography,
3768	addToCartFontSize,
3769	addToCartLatterSpacing,
3770	addToCartLineHeight,
3771	addToCartWordSpacing,
3772	} = attributes;
3773	const [addToCartButtonStyleType, setAddToCartButtonStyleType] = useState("color");
3774	return (
3775	<>
3776	<TypographyNew
3777	attributes={{
3778	family: addToCartTypography,
3779	familyKey: "addToCartTypography",
3780	fontSize: addToCartFontSize,
3781	fontSizeKey: "addToCartFontSize",
3782	fontSpacing: addToCartLatterSpacing,
3783	fontSpacingKey: "addToCartLatterSpacing",
3784	lineHeight: addToCartLineHeight,
3785	lineHeightKey: "addToCartLineHeight",
3786	wordSpacing: addToCartWordSpacing,
3787	wordSpacingKey: "addToCartWordSpacing",
3788	}}
3789	setAttributes={setAttributes}
3790	spacingDefaultValue={{ unit: "px", value: 0 }}
3791	fontSizeDefault={{ unit: "px", value: 18 }}
3792	lineDefaultValue={{ unit: "px", value: 24 }}
3793	/>
3794	<SPToggleGroupControl
3795	attributes={addToCartButtonStyleType}
3796	items={[
3797	{ label: "Normal", value: "color" },
3798	{ label: "Hover", value: "hover" },
3799	]}
3800	onClick={(val) => setAddToCartButtonStyleType(val)}
3801	/>
3802	{"color" === addToCartButtonStyleType ? (
3803	<>
3804	<SpColorPicker
3805	label={__("Color", "post-carousel")}
3806	value={addToCartColor.color}
3807	onChange={(newColor) =>
3808	setAttributes({
3809	addToCartColor: {
3810	...addToCartColor,
3811	color: newColor,
3812	},
3813	})
3814	}
3815	/>
3816	</>
3817	) : (
3818	<>
3819	<SpColorPicker
3820	label={__("Color", "post-carousel")}
3821	value={addToCartColor.hoverColor}
3822	onChange={(newColor) =>
3823	setAttributes({
3824	addToCartColor: {
3825	...addToCartColor,
3826	hoverColor: newColor,
3827	},
3828	})
3829	}
3830	/>
3831	</>
3832	)}
3833	<Divider position={"sp-w-100pct bottom"} />
3834	<Background
3835	label={__("Background Type", "post-carousel")}
3836	colorLabel="Solid Color"
3837	defaultColor="#4e4f52"
3838	attributes={addToCartBg}
3839	attributesKey={"addToCartBg"}
3840	setAttributes={setAttributes}
3841	colorType={addToCartButtonStyleType}
3842	items={[
3843	{
3844	label: <TransparentIcon />,
3845	value: "transparent",
3846	tooltip: "Transparent",
3847	},
3848	{ label: <BgIcon />, value: "bgColor", tooltip: "Solid" },
3849	{
3850	label: <GradientIcon />,
3851	value: "gradient",
3852	tooltip: "Gradient",
3853	},
3854	]}
3855	/>
3856	<Border
3857	attributes={{
3858	border: addToCartBorder,
3859	borderWidth: addToCartBorderWidth,
3860	}}
3861	attributesKey={{
3862	border: "addToCartBorder",
3863	borderWidth: "addToCartBorderWidth",
3864	}}
3865	setAttributes={setAttributes}
3866	/>
3867	</>
3868	);
3869	};
3870
3871	export const PostTimelineConnectorStyleTab = ({ attributes, setAttributes }) => {
3872	const {
3873	blockName,
3874	timelineConnectorColor,
3875	timelineIndicatorColor,
3876	timelineCircleBgColor,
3877	timelineConnectorBorder,
3878	timelineConnectorBorderWidth,
3879	timelineConnectorBorderRadius,
3880	} = attributes;
3881	const [colorButton, setColorButton] = useState("normal");
3882
3883	return (
3884	<>
3885	{["post-timeline-one", "post-timeline-two"].includes(blockName) ? (
3886	<>
3887	<SPToggleGroupControl
3888	attributes={colorButton}
3889	onClick={(value) => setColorButton(value)}
3890	items={[
3891	{ label: "Normal", value: "normal" },
3892	{ label: "Active", value: "active" },
3893	]}
3894	/>
3895	{"normal" === colorButton ? (
3896	<>
3897	<SpColorPicker
3898	label={__("Connector Color", "post-carousel")}
3899	value={timelineConnectorColor.color}
3900	onChange={(newColor) =>
3901	setAttributes({
3902	timelineConnectorColor: {
3903	...timelineConnectorColor,
3904	color: newColor,
3905	},
3906	})
3907	}
3908	defaultColor={"#E0E0E0"}
3909	/>
3910	<SpColorPicker
3911	label={__("Speech Bubble Color", "post-carousel")}
3912	value={timelineIndicatorColor.color}
3913	onChange={(newColor) =>
3914	setAttributes({
3915	timelineIndicatorColor: {
3916	...timelineIndicatorColor,
3917	color: newColor,
3918	},
3919	})
3920	}
3921	defaultColor={"#E0E0E0"}
3922	/>
3923	<SpColorPicker
3924	label={__("Circle Background Color", "post-carousel")}
3925	value={timelineCircleBgColor.color}
3926	onChange={(newColor) =>
3927	setAttributes({
3928	timelineCircleBgColor: {
3929	...timelineCircleBgColor,
3930	color: newColor,
3931	},
3932	})
3933	}
3934	defaultColor={"#FFFFFF"}
3935	/>
3936	</>
3937	) : (
3938	<>
3939	<SpColorPicker
3940	label={__("Connector Color", "post-carousel")}
3941	value={timelineConnectorColor.active}
3942	onChange={(newColor) =>
3943	setAttributes({
3944	timelineConnectorColor: {
3945	...timelineConnectorColor,
3946	active: newColor,
3947	},
3948	})
3949	}
3950	defaultColor={"var(--sp-smart-primary-2-600)"}
3951	/>
3952	<SpColorPicker
3953	label={__("Speech Bubble Color", "post-carousel")}
3954	value={timelineIndicatorColor.active}
3955	onChange={(newColor) =>
3956	setAttributes({
3957	timelineIndicatorColor: {
3958	...timelineIndicatorColor,
3959	active: newColor,
3960	},
3961	})
3962	}
3963	defaultColor={"var(--sp-smart-primary-2-600)"}
3964	/>
3965	<SpColorPicker
3966	label={__("Circle Background Color", "post-carousel")}
3967	value={timelineCircleBgColor.active}
3968	onChange={(newColor) =>
3969	setAttributes({
3970	timelineCircleBgColor: {
3971	...timelineCircleBgColor,
3972	active: newColor,
3973	},
3974	})
3975	}
3976	defaultColor={"#E0E0E0"}
3977	/>
3978	</>
3979	)}
3980	<Divider position={"sp-w-100pct bottom"} />
3981	</>
3982	) : (
3983	<>
3984	<SpColorPicker
3985	label={__("Connector Color", "post-carousel")}
3986	value={timelineConnectorColor.active}
3987	onChange={(newColor) =>
3988	setAttributes({
3989	timelineConnectorColor: {
3990	...timelineConnectorColor,
3991	active: newColor,
3992	},
3993	})
3994	}
3995	defaultColor={"var(--sp-smart-primary-2-600)"}
3996	/>
3997	<SpColorPicker
3998	label={__("Speech Bubble Color", "post-carousel")}
3999	value={timelineIndicatorColor.color}
4000	onChange={(newColor) =>
4001	setAttributes({
4002	timelineIndicatorColor: {
4003	...timelineIndicatorColor,
4004	color: newColor,
4005	},
4006	})
4007	}
4008	defaultColor={"var(--sp-smart-primary-2-600)"}
4009	/>
4010	<SpColorPicker
4011	label={__("Circle Background Color", "post-carousel")}
4012	value={timelineCircleBgColor.color}
4013	onChange={(newColor) =>
4014	setAttributes({
4015	timelineCircleBgColor: {
4016	...timelineCircleBgColor,
4017	color: newColor,
4018	},
4019	})
4020	}
4021	defaultColor={"#FFFFFF"}
4022	/>
4023	</>
4024	)}
4025	<Border
4026	attributes={{
4027	border: timelineConnectorBorder,
4028	borderWidth: timelineConnectorBorderWidth,
4029	}}
4030	attributesKey={{
4031	border: "timelineConnectorBorder",
4032	borderWidth: "timelineConnectorBorderWidth",
4033	}}
4034	setAttributes={setAttributes}
4035	btnType={blockName === "post-timeline-three" && "normal"}
4036	/>
4037	<Spacing
4038	label={__("Border Radius", "post-carousel")}
4039	attributes={timelineConnectorBorderRadius}
4040	attributesKey={"timelineConnectorBorderRadius"}
4041	setAttributes={setAttributes}
4042	units={["px", "%", "em"]}
4043	defaultValue={{
4044	unit: "%",
4045	value: { top: 50, right: 50, bottom: 50, left: 50 },
4046	}}
4047	indicator={"radius"}
4048	/>
4049	</>
4050	);
4051	};
4052
4053	export const DividerStyleTab = ({ attributes, setAttributes }) => {
4054	const { dividerBg, dividerWidth, dividerHeight } = attributes;
4055
4056	return (
4057	<>
4058	<Background
4059	label={__("Color Type", "post-carousel")}
4060	colorLabel="Solid Color"
4061	defaultColor="#1E1E1E99"
4062	attributes={dividerBg}
4063	attributesKey={"dividerBg"}
4064	setAttributes={setAttributes}
4065	colorType={"color"}
4066	items={[
4067	{
4068	label: <TransparentIcon />,
4069	value: "transparent",
4070	tooltip: "Transparent",
4071	},
4072	{
4073	label: <BgIcon />,
4074	value: "bgColor",
4075	tooltip: "Solid",
4076	},
4077	{
4078	label: <GradientIcon />,
4079	value: "gradient",
4080	tooltip: "Gradient",
4081	},
4082	]}
4083	/>
4084	</>
4085	);
4086	};
4087