1#@!#!123s

https 1#@!#!123s
: / dom737635 / wp-content / plugins / fusion-builder / shortcodes /
Filename : awb-recent-activity-tabs.php
back
<?php
/**
 * Add an element to fusion-builder.
 *
 * @package fusion-builder
 * @since 3.16
 */

if ( fusion_is_element_enabled( 'awb_recent_activity_tabs' ) ) {

	if ( ! class_exists( 'FusionSC_RecentActivityTabs' ) ) {
		/**
		 * Shortcode class.
		 *
		 * @package fusion-builder
		 * @since 3.16
		 */
		class FusionSC_RecentActivityTabs extends Fusion_Element {

			/**
			 * The element counter.
			 *
			 * @access private
			 * @since 3.16
			 * @var int
			 */
			private $element_counter = 1;

			/**
			 * The resolved date formats, cached per instance render.
			 *
			 * @access private
			 * @since 3.16
			 * @var array|null
			 */
			private $date_formats = null;

			/**
			 * The tabs this element knows how to render, in nav order.
			 *
			 * @access private
			 * @since 3.16
			 * @var array
			 */
			private $available_tabs = [
				'popular_posts' => 'popular',
				'recent_posts'  => 'recent',
				'comments'      => 'comments',
			];

			/**
			 * Constructor.
			 *
			 * @access public
			 * @since 3.16
			 */
			public function __construct() {
				parent::__construct();
				add_filter( 'fusion_attr_awb-recent-activity-tabs', [ $this, 'attr' ] );

				add_shortcode( 'awb_recent_activity_tabs', [ $this, 'render' ] );

				// Ajax mechanism for query related part.
				add_action( 'wp_ajax_get_awb_recent_activity_tabs', [ $this, 'ajax_query' ] );
			}

			/**
			 * Gets the default values of the element params.
			 *
			 * @static
			 * @access public
			 * @since 3.16
			 * @return array
			 */
			public static function get_element_defaults() {
				$fusion_settings = awb_get_fusion_settings();

				return [
					'tabs_showing'                     => 'popular_posts,recent_posts,comments',
					'popular_label'                    => '',
					'recent_label'                     => '',
					'comments_label'                   => '',
					'popular_icon'                     => '',
					'recent_icon'                      => '',
					'comments_icon'                    => '',
					'post_design'                      => 'image',
					'show_excerpt'                     => 'no',
					'order_by'                         => 'comments',
					'nr_popular_posts'                 => '3',
					'nr_recent_posts'                  => '3',
					'nr_comments'                      => '3',
					'excerpt_words'                    => '15',
					'comment_words'                    => '12',

					'alignment'                        => 'stretch',
					'tab_bar_size'                     => '4',
					'icon_position'                    => $fusion_settings->get( 'tabs_icon_position' ),
					'icon_size'                        => $fusion_settings->get( 'tabs_icon_size' ),
					'icon_color'                       => $fusion_settings->get( 'tabs_icon_color' ),
					'hover_icon_color'                 => $fusion_settings->get( 'tabs_active_icon_color' ),
					'active_icon_color'                => $fusion_settings->get( 'tabs_active_icon_color' ),

					'hide_on_mobile'                   => fusion_builder_default_visibility( 'string' ),
					'class'                            => '',
					'id'                               => '',
					'html_attributes'                  => '',

					'animation_type'                   => '',
					'animation_direction'              => 'left',
					'animation_speed'                  => '',
					'animation_delay'                  => '',
					'animation_offset'                 => $fusion_settings->get( 'animation_offset' ),
					'animation_color'                  => '',

					'margin_top'                       => '',
					'margin_right'                     => '',
					'margin_bottom'                    => '',
					'margin_left'                      => '',
					'margin_top_medium'                => '',
					'margin_right_medium'              => '',
					'margin_bottom_medium'             => '',
					'margin_left_medium'               => '',
					'margin_top_small'                 => '',
					'margin_right_small'               => '',
					'margin_bottom_small'              => '',
					'margin_left_small'                => '',

					'border_top'                       => '',
					'border_right'                     => '',
					'border_bottom'                    => '',
					'border_left'                      => '',
					'border_color'                     => $fusion_settings->get( 'tabs_border_color' ),
					'border_style'                     => 'solid',
					'radius_top_left'                  => '',
					'radius_top_right'                 => '',
					'radius_bottom_right'              => '',
					'radius_bottom_left'               => '',

					'tab_bg_color'                     => $fusion_settings->get( 'tabs_inactive_color' ),
					'tab_color'                        => $fusion_settings->get( 'tabs_title_color' ),
					'hover_tab_bg_color'               => $fusion_settings->get( 'tabs_bg_color' ),
					'hover_tab_color'                  => $fusion_settings->get( 'tabs_active_title_color' ),
					'tab_bar_color'                    => $fusion_settings->get( 'tabs_border_color' ),
					'hover_tab_bar_color'              => $fusion_settings->get( 'primary_color' ),
					'active_tab_bar_color'             => $fusion_settings->get( 'primary_color' ),
					'active_tab_bg_color'              => $fusion_settings->get( 'tabs_bg_color' ),
					'active_tab_color'                 => $fusion_settings->get( 'tabs_active_title_color' ),

					'fusion_font_family_tab_font'      => '',
					'fusion_font_variant_tab_font'     => '',
					'tab_font_size'                    => '',
					'tab_line_height'                  => '',
					'tab_letter_spacing'               => '',
					'tab_text_transform'               => '',
					'tab_padding_top'                  => '',
					'tab_padding_right'                => '',
					'tab_padding_bottom'               => '',
					'tab_padding_left'                 => '',

					'bg_color'                         => $fusion_settings->get( 'tabs_bg_color' ),
					'separator_size'                   => '1',
					'separator_style'                  => 'solid',
					'separator_color'                  => $fusion_settings->get( 'tabs_border_color' ),
					'content_padding_top'              => '',
					'content_padding_right'            => '',
					'content_padding_bottom'           => '',
					'content_padding_left'             => '',
					'content_lines_clamp'              => '3',

					'image_width'                      => '66',
					'date_padding_top'                 => '',
					'date_padding_right'               => '',
					'date_padding_bottom'              => '',
					'date_padding_left'                => '',
					'image_date_gap'                   => '',
					'date_bg_color'                    => $fusion_settings->get( 'tabs_inactive_color' ),
					'image_date_radius_top_left'       => '',
					'image_date_radius_top_right'      => '',
					'image_date_radius_bottom_right'   => '',
					'image_date_radius_bottom_left'    => '',

					'title_color'                      => '',
					'link_hover_color'                 => $fusion_settings->get( 'link_hover_color' ),
					'fusion_font_family_title_font'    => '',
					'fusion_font_variant_title_font'   => '',
					'title_font_size'                  => '',
					'title_line_height'                => '',
					'title_letter_spacing'             => '',
					'title_text_transform'             => '',

					'content_color'                    => '',
					'fusion_font_family_content_font'  => '',
					'fusion_font_variant_content_font' => '',
					'content_font_size'                => '',
					'content_line_height'              => '',
					'content_letter_spacing'           => '',
					'content_text_transform'           => '',

					'date_color'                       => '',
					'fusion_font_family_date_font'     => '',
					'fusion_font_variant_date_font'    => '',
					'date_font_size'                   => '',
					'date_line_height'                 => '',
					'date_letter_spacing'              => '',
					'date_text_transform'              => '',
				];
			}

			/**
			 * Resolves the element args and clears anything cached from a previous instance.
			 *
			 * @access public
			 * @since 3.16
			 * @param array $args The shortcode args.
			 * @return void
			 */
			public function set_args( $args ) {
				$this->defaults = self::get_element_defaults();
				$this->args     = FusionBuilder::set_shortcode_defaults( $this->defaults, $args, 'awb_recent_activity_tabs' );

				// Reset the per instance cache, the theme options are read once per render.
				$this->date_formats = null;
			}

			/**
			 * Render the shortcode.
			 *
			 * @access public
			 * @since 3.16
			 * @param array  $args    Shortcode parameters.
			 * @param string $content Content between shortcode.
			 * @return string HTML output.
			 */
			public function render( $args, $content = '' ) {
				$this->set_args( $args );
				$this->set_element_id( $this->element_counter );
				$this->element_counter++;

				$tabs = $this->get_tabs();

				if ( empty( $tabs ) ) {
					return '';
				}

				$html  = '<div ' . FusionBuilder::attributes( 'awb-recent-activity-tabs' ) . '>';
				$html .= $this->get_nav_html( $tabs );
				$html .= $this->get_panels_html( $tabs );
				$html .= '</div>';

				$this->on_render();

				return $html;
			}

			/**
			 * Ajax callback, returns the query driven markup of each active tab.
			 *
			 * @access public
			 * @since 3.16
			 * @param array $defaults The element defaults.
			 * @return void
			 */
			public function ajax_query( $defaults ) {
				check_ajax_referer( 'fusion_load_nonce', 'fusion_load_nonce' );

				// From Ajax Request.
				if ( isset( $_POST['model'] ) && ! apply_filters( 'fusion_builder_live_request', false ) ) { // phpcs:ignore WordPress.Security.NonceVerification
					$defaults = wp_unslash( $_POST['model']['params'] ); // phpcs:ignore WordPress.Security
					add_filter( 'fusion_builder_live_request', '__return_true' );
				}

				$this->set_args( $defaults );

				$html_parts = [];

				// Only the tabs actually in use are queried.
				foreach ( $this->get_tabs() as $tab ) {
					$html_parts[ $this->available_tabs[ $tab ] . '_html' ] = $this->get_tab_content_html( $tab );
				}

				echo wp_json_encode( $html_parts );
				wp_die();
			}

			/**
			 * Gets the active tabs, in the order the user arranged them.
			 *
			 * @access private
			 * @since 3.16
			 * @return array
			 */
			private function get_tabs() {
				$tabs = array_filter( array_map( 'trim', explode( ',', (string) $this->args['tabs_showing'] ) ) );

				// array_intersect keeps the order of the first array, so the user ordering wins.
				return array_values( array_intersect( $tabs, array_keys( $this->available_tabs ) ) );
			}

			/**
			 * Gets the label of a tab, falling back to the default wording.
			 *
			 * @access private
			 * @since 3.16
			 * @param string $tab The tab key.
			 * @return string
			 */
			private function get_tab_label( $tab ) {
				$extras = self::get_element_extras();
				$custom = $this->args[ $this->available_tabs[ $tab ] . '_label' ];

				return '' !== $custom ? $custom : $extras[ $this->available_tabs[ $tab ] . '_string' ];
			}

			/**
			 * Whether any tab has an icon set.
			 *
			 * @access private
			 * @since 3.16
			 * @return bool
			 */
			private function has_icons() {
				foreach ( $this->available_tabs as $slug ) {
					if ( '' !== $this->args[ $slug . '_icon' ] ) {
						return true;
					}
				}

				return false;
			}

			/**
			 * Gets the icon markup of a tab, empty when no icon is set.
			 *
			 * @access private
			 * @since 3.16
			 * @param string $tab The tab key.
			 * @return string
			 */
			private function get_tab_icon( $tab ) {
				$icon = $this->args[ $this->available_tabs[ $tab ] . '_icon' ];

				if ( '' === $icon ) {
					return '';
				}

				return '<span class="awb-rec-tabs__icon ' . fusion_font_awesome_name_handler( $icon ) . '" aria-hidden="true"></span>';
			}

			/**
			 * Gets the tab list markup.
			 *
			 * @access private
			 * @since 3.16
			 * @param array $tabs The active tabs.
			 * @return string
			 */
			private function get_nav_html( $tabs ) {
				$element_id = $this->get_element_id();
				$is_active  = true;
				$html       = '<div class="awb-rec-tabs__nav"><nav class="awb-rec-tabs__tabs" role="tablist">';

				foreach ( $tabs as $tab ) {
					$slug = $this->available_tabs[ $tab ];

					$html .= '<button id="awb-rec-tabs__btn-' . esc_attr( $slug . '-' . $element_id ) . '"';
					$html .= ' class="awb-rec-tabs__tab' . ( $is_active ? ' awb-rec-tabs__tab--active' : '' ) . '"';
					$html .= ' data-link="awb-rec-tabs__' . esc_attr( $slug ) . '"';
					$html .= ' role="tab" aria-selected="' . ( $is_active ? 'true' : 'false' ) . '"';
					$html .= ' aria-controls="awb-rec-tabs__' . esc_attr( $slug . '-' . $element_id ) . '"';
					$html .= ' tabindex="' . ( $is_active ? '0' : '-1' ) . '">';
					$html .= $this->get_tab_icon( $tab );
					$html .= '<span class="awb-rec-tabs__label">' . esc_html( $this->get_tab_label( $tab ) ) . '</span>';
					$html .= '</button>';

					$is_active = false;
				}

				return $html . '</nav></div>';
			}

			/**
			 * Gets the tab panels markup.
			 *
			 * @access private
			 * @since 3.16
			 * @param array $tabs The active tabs.
			 * @return string
			 */
			private function get_panels_html( $tabs ) {
				$element_id = $this->get_element_id();
				$is_active  = true;
				$html       = '<div class="awb-rec-tabs__content-tabs">';

				foreach ( $tabs as $tab ) {
					$slug    = $this->available_tabs[ $tab ];
					$classes = 'awb-rec-tabs__content';

					if ( $is_active ) {
						$classes .= ' awb-rec-tabs__content--active';
					}

					if ( 'comments' === $tab ) {
						$classes .= ' awb-rec-tabs__content--comments';
					}

					$html .= '<div id="awb-rec-tabs__' . esc_attr( $slug . '-' . $element_id ) . '"';
					$html .= ' class="' . esc_attr( $classes ) . '"';
					$html .= ' data-name="awb-rec-tabs__' . esc_attr( $slug ) . '"';
					$html .= ' role="tabpanel" aria-labelledby="awb-rec-tabs__btn-' . esc_attr( $slug . '-' . $element_id ) . '">';
					$html .= $this->get_tab_content_html( $tab );
					$html .= '</div>';

					$is_active = false;
				}

				return $html . '</div>';
			}

			/**
			 * Gets the markup of a single tab panel.
			 *
			 * @access private
			 * @since 3.16
			 * @param string $tab The tab key.
			 * @return string
			 */
			private function get_tab_content_html( $tab ) {
				if ( 'popular_posts' === $tab ) {
					return $this->get_popular_posts_html();
				}

				if ( 'recent_posts' === $tab ) {
					return $this->get_recent_posts_html();
				}

				return $this->get_comments_html();
			}

			/**
			 * Gets the date formats, from the theme options when available.
			 *
			 * @access private
			 * @since 3.16
			 * @return array
			 */
			private function get_date_formats() {
				if ( null !== $this->date_formats ) {
					return $this->date_formats;
				}

				$fusion_settings = class_exists( 'Fusion_Settings' ) ? awb_get_fusion_settings() : false;

				if ( $fusion_settings ) {
					$date_format = $fusion_settings->get( 'date_format' );

					$this->date_formats = [
						'day'         => $fusion_settings->get( 'alternate_date_format_day' ),
						'month_year'  => $fusion_settings->get( 'alternate_date_format_month_year' ),
						'date_format' => $date_format ? $date_format : get_option( 'date_format' ),
					];
				} else {
					$this->date_formats = [
						'day'         => 'j',
						'month_year'  => 'm, Y',
						'date_format' => get_option( 'date_format' ),
					];
				}

				return $this->date_formats;
			}

			/**
			 * Gets the popular posts markup.
			 *
			 * @access private
			 * @since 3.16
			 * @return string
			 */
			private function get_popular_posts_html() {
				$query_args = [
					'posts_per_page'      => max( 1, (int) $this->args['nr_popular_posts'] ),
					'order'               => 'DESC',
					'ignore_sticky_posts' => 1,
				];

				if ( 'comments' === $this->args['order_by'] ) {
					$query_args['orderby'] = 'comment_count';
				} else {
					$query_args['meta_key'] = 'avada_post_views_count'; // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key
					$query_args['orderby']  = 'meta_value_num';
				}

				return $this->get_posts_html( $query_args );
			}

			/**
			 * Gets the recent posts markup.
			 *
			 * @access private
			 * @since 3.16
			 * @return string
			 */
			private function get_recent_posts_html() {
				return $this->get_posts_html(
					[
						'posts_per_page'      => max( 1, (int) $this->args['nr_recent_posts'] ),
						'ignore_sticky_posts' => 1,
					]
				);
			}

			/**
			 * Runs a post query and returns the list markup for it.
			 *
			 * @access private
			 * @since 3.16
			 * @param array $query_args The WP_Query args.
			 * @return string
			 */
			private function get_posts_html( $query_args ) {
				$posts = fusion_cached_query( $query_args );
				$html  = '<ul class="awb-rec-tabs__list">';

				if ( $posts->have_posts() ) {
					while ( $posts->have_posts() ) {
						$posts->the_post();
						$html .= $this->get_post_html( $posts->post );
					}

					wp_reset_postdata();
				} else {
					$html .= '<li class="awb-rec-tabs__post">' . esc_html__( 'No posts have been published yet.', 'fusion-builder' ) . '</li>';
				}

				return $html . '</ul>';
			}

			/**
			 * Gets the markup of a single post.
			 *
			 * @access private
			 * @since 3.16
			 * @param WP_Post $post_object The post.
			 * @return string
			 */
			private function get_post_html( $post_object ) {
				$date_formats = $this->get_date_formats();
				$is_date      = 'post_date' === $this->args['post_design'];
				$permalink    = esc_url( get_permalink( $post_object ) );

				$html = '<li class="awb-rec-tabs__post">';

				if ( $is_date ) {
					$html .= '<div class="awb-rec-tabs__date">';
					$html .= '<div class="awb-rec-tabs__day">' . esc_html( get_the_time( $date_formats['day'], $post_object ) ) . '</div>';
					$html .= '<div class="awb-rec-tabs__month-year">' . esc_html( get_the_time( $date_formats['month_year'], $post_object ) ) . '</div>';
					$html .= '</div>';
				} elseif ( has_post_thumbnail( $post_object ) ) {
					$html .= '<div class="awb-rec-tabs__image">';
					$html .= '<a href="' . $permalink . '" aria-label="' . the_title_attribute(
						[
							'echo' => false,
							'post' => $post_object,
						]
					) . '">' . get_the_post_thumbnail( $post_object, 'recent-works-thumbnail' ) . '</a>';
					$html .= '</div>';
				}

				$html .= '<div class="awb-rec-tabs__post-info">';
				$html .= '<a class="awb-rec-tabs__post-title" href="' . $permalink . '">' . get_the_title( $post_object ) . '</a>';

				if ( $is_date ) {
					$html .= '<div class="awb-rec-tabs__post-excerpt">' . $this->get_post_excerpt( $post_object ) . '</div>';
				} else {
					$html .= '<div class="awb-rec-tabs__post-date">' . esc_html( get_the_time( $date_formats['date_format'], $post_object ) ) . '</div>';

					if ( 'yes' === $this->args['show_excerpt'] ) {
						$html .= '<div class="awb-rec-tabs__post-excerpt">' . $this->get_post_excerpt( $post_object ) . '</div>';
					}
				}

				$html .= '</div>';

				return $html . '</li>';
			}

			/**
			 * Gets the excerpt of a post.
			 *
			 * @access private
			 * @since 3.16
			 * @param WP_Post $post_object The post.
			 * @return string
			 */
			private function get_post_excerpt( $post_object ) {
				$length = (int) apply_filters( 'awb_recent_activity_tabs_excerpt_length', $this->args['excerpt_words'] );

				if ( function_exists( 'fusion_get_post_content_excerpt' ) ) {
					return fusion_get_post_content_excerpt( $length, true, $post_object->ID );
				}

				return wp_trim_words( get_the_excerpt( $post_object ), $length );
			}

			/**
			 * Gets the comments markup.
			 *
			 * @access private
			 * @since 3.16
			 * @return string
			 */
			private function get_comments_html() {
				$the_comments = get_comments(
					[
						'number'      => max( 1, (int) $this->args['nr_comments'] ),
						'status'      => 'approve',
						'type'        => 'comment',
						'post_status' => 'publish',
					]
				);

				$html = '<ul class="awb-rec-tabs__list">';

				if ( empty( $the_comments ) ) {
					return $html . '<li class="awb-rec-tabs__post">' . esc_html__( 'No comments have been published yet.', 'fusion-builder' ) . '</li></ul>';
				}

				$length      = (int) apply_filters( 'awb_recent_activity_tabs_comment_length', $this->args['comment_words'] );
				$avatar_size = max( 24, (int) $this->args['image_width'] );

				foreach ( $the_comments as $comment ) {
					$author = wp_strip_all_tags( $comment->comment_author );

					$html .= '<li class="awb-rec-tabs__post">';
					$html .= '<div class="awb-rec-tabs__avatar">' . get_avatar( $comment, $avatar_size ) . '</div>';
					$html .= '<div class="awb-rec-tabs__post-info">';

					/* translators: %s: Comment author. */
					$html .= '<div class="awb-rec-tabs__post-comment">' . sprintf( esc_html__( '%s says:', 'fusion-builder' ), esc_html( $author ) ) . '</div>';

					/* translators: %1$s: Comment author. %2$s: Post title. */
					$title = sprintf( esc_attr__( '%1$s on %2$s', 'fusion-builder' ), esc_attr( $author ), esc_attr( get_the_title( $comment->comment_post_ID ) ) );

					$html .= '<div class="awb-rec-tabs__comment">';
					$html .= '<a class="awb-rec-tabs__comment-link" href="' . esc_url( get_comment_link( $comment ) ) . '" title="' . $title . '">';
					$html .= esc_html( wp_trim_words( wp_strip_all_tags( $comment->comment_content ), $length ) );
					$html .= '</a>';
					$html .= '</div>';

					$html .= '</div>';
					$html .= '</li>';
				}

				return $html . '</ul>';
			}

			/**
			 * Builds the wrapper attributes.
			 *
			 * @access public
			 * @since 3.16
			 * @return array
			 */
			public function attr() {
				$attr = [
					'class' => 'awb-rec-tabs awb-rec-tabs-' . $this->get_element_id(),
					'style' => '',
				];

				$attr['class'] .= ' awb-rec-tabs--align-' . $this->args['alignment'];

				if ( $this->has_icons() ) {
					$attr['class'] .= ' awb-rec-tabs--icon-' . $this->args['icon_position'];
				}

				if ( $this->args['id'] ) {
					$attr['id'] = $this->args['id'];
				}

				if ( $this->args['class'] ) {
					$attr['class'] .= ' ' . $this->args['class'];
				}

				$attr = fusion_builder_visibility_atts( $this->args['hide_on_mobile'], $attr );

				if ( $this->args['animation_type'] ) {
					$attr = Fusion_Builder_Animation_Helper::add_animation_attributes( $this->args, $attr );
				}

				$attr['style'] .= $this->get_style_variables();

				return AWB_Attributes_Helper::add_attributes( $this->args, $attr );
			}

			/**
			 * Gets the CSS variables of the element.
			 *
			 * @access protected
			 * @since 3.16
			 * @return string
			 */
			protected function get_style_variables() {
				// Colours, keywords and unitless numbers are passed through as authored; only
				// lengths get a unit added. Running a colour through Fusion_Sanitize::color
				// would turn a named colour such as "red" into #ffffff.
				$css_vars = [
					'margin_top'                => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right'              => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom'             => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left'               => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_top_medium'         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right_medium'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom_medium'      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left_medium'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_top_small'          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_right_small'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_bottom_small'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'margin_left_small'         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'border_top'                => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'border_right'              => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'border_bottom'             => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'border_left'               => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'radius_top_left'           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'radius_top_right'          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'radius_bottom_right'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'radius_bottom_left'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_font_size'             => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_letter_spacing'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_padding_top'           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_padding_right'         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_padding_bottom'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_padding_left'          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'tab_bar_size'              => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_padding_top'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_padding_right'     => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_padding_bottom'    => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_padding_left'      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_width'               => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_padding_top'          => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_padding_right'        => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_padding_bottom'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_padding_left'         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_date_gap'            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_date_radius_top_left' => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_date_radius_top_right' => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_date_radius_bottom_right' => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'image_date_radius_bottom_left' => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'title_font_size'           => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'title_letter_spacing'      => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_font_size'         => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'content_letter_spacing'    => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_font_size'            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'date_letter_spacing'       => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'separator_size'            => [ 'callback' => [ 'Fusion_Sanitize', 'get_value_with_unit' ] ],
					'border_style',
					'separator_style',
					'title_color',
					'content_color',
					'date_color',
					'content_lines_clamp',
					'tab_line_height',
					'tab_text_transform',
					'title_line_height',
					'title_text_transform',
					'content_line_height',
					'content_text_transform',
					'date_line_height',
					'date_text_transform',
				];

				// Options whose default comes from a Global Option must be emitted unconditionally:
				// is_default() would skip them whenever they still match the Global Option, and the
				// stylesheet fallback cannot track a value the user can change. Mirrors fusion-tabs.
				$custom_vars = [
					'border_color'         => $this->args['border_color'],
					'icon_size'            => Fusion_Sanitize::get_value_with_unit( $this->args['icon_size'] ),
					'tab_bg_color'         => $this->args['tab_bg_color'],
					'active_tab_bg_color'  => $this->args['active_tab_bg_color'],
					'hover_tab_bg_color'   => $this->args['hover_tab_bg_color'],
					'tab_bar_color'        => $this->args['tab_bar_color'],
					'hover_tab_bar_color'  => $this->args['hover_tab_bar_color'],
					'active_tab_bar_color' => $this->args['active_tab_bar_color'],
					'bg_color'             => $this->args['bg_color'],
					'separator_color'      => $this->args['separator_color'],
					'link_hover_color'     => $this->args['link_hover_color'],
					'date_bg_color'        => $this->args['date_bg_color'],
				];

				// These Global Options ship empty, so an empty value must inherit rather than
				// emit an empty custom property.
				foreach ( [ 'tab_color', 'hover_tab_color', 'active_tab_color', 'icon_color', 'hover_icon_color', 'active_icon_color' ] as $option ) {
					if ( '' !== $this->args[ $option ] ) {
						$custom_vars[ $option ] = $this->args[ $option ];
					}
				}

				$custom_vars = array_filter(
					$custom_vars,
					function ( $value ) {
						return '' !== $value;
					}
				);

				$font_vars = $this->get_font_styling_vars( 'tab_font' ) .
					$this->get_font_styling_vars( 'title_font' ) .
					$this->get_font_styling_vars( 'content_font' ) .
					$this->get_font_styling_vars( 'date_font' );

				return $this->get_css_vars_for_options( $css_vars ) . $this->get_custom_css_vars( $custom_vars ) . $font_vars;
			}

			/**
			 * Sets the strings used by the front-end editor template.
			 *
			 * @static
			 * @access public
			 * @since 3.16
			 * @return array
			 */
			public static function get_element_extras() {
				return [
					'popular_string'  => esc_html__( 'Popular', 'fusion-builder' ),
					'recent_string'   => esc_html__( 'Recent', 'fusion-builder' ),
					'comments_string' => esc_html__( 'Comments', 'fusion-builder' ),
				];
			}

			/**
			 * Loads the frontend script.
			 *
			 * @access public
			 * @since 3.16
			 * @return void
			 */
			public function on_first_render() {
				Fusion_Dynamic_JS::enqueue_script(
					'awb-recent-activity-tabs',
					FusionBuilder::$js_folder_url . '/general/awb-recent-activity-tabs.js',
					FusionBuilder::$js_folder_path . '/general/awb-recent-activity-tabs.js',
					[ 'jquery' ],
					FUSION_BUILDER_VERSION,
					true
				);
			}

			/**
			 * Loads the element stylesheets.
			 *
			 * @access public
			 * @since 3.16
			 * @return void
			 */
			public function add_css_files() {
				FusionBuilder()->add_element_css( FUSION_BUILDER_PLUGIN_DIR . 'assets/css/shortcodes/awb-recent-activity-tabs.min.css' );

				if ( class_exists( 'Avada' ) ) {
					$version = Avada::get_theme_version();

					Fusion_Media_Query_Scripts::$media_query_assets[] = [
						'awb-recent-activity-tabs-md',
						FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/awb-recent-activity-tabs-md.min.css',
						[],
						$version,
						Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-medium' ),
					];
					Fusion_Media_Query_Scripts::$media_query_assets[] = [
						'awb-recent-activity-tabs-sm',
						FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/awb-recent-activity-tabs-sm.min.css',
						[],
						$version,
						Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-small' ),
					];
				}
			}
		}
	}

	new FusionSC_RecentActivityTabs();
}

/**
 * Map shortcode to Avada Builder.
 *
 * @since 3.16
 * @return void
 */
function awb_recent_activity_tabs_element() {
	$fusion_settings = awb_get_fusion_settings();

	$ajax_render = [
		'function' => 'fusion_ajax',
		'action'   => 'get_awb_recent_activity_tabs',
		'ajax'     => true,
	];

	$params = [

		// --- General.
		[
			'type'        => 'connected_sortable',
			'heading'     => esc_attr__( 'Tabs Showing', 'fusion-builder' ),
			'description' => esc_attr__( 'Choose which tabs are shown. Drag to reorder them, the first one is the active tab.', 'fusion-builder' ),
			'param_name'  => 'tabs_showing',
			'default'     => 'popular_posts,recent_posts,comments',
			'choices'     => [
				'popular_posts' => esc_attr__( 'Popular Posts', 'fusion-builder' ),
				'recent_posts'  => esc_attr__( 'Recent Posts', 'fusion-builder' ),
				'comments'      => esc_attr__( 'Comments', 'fusion-builder' ),
			],
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'select',
			'heading'     => esc_attr__( 'Post Design', 'fusion-builder' ),
			'description' => esc_attr__( 'Select how the posts displayed should look.', 'fusion-builder' ),
			'param_name'  => 'post_design',
			'value'       => [
				'image'     => esc_attr__( 'Featured Image', 'fusion-builder' ),
				'post_date' => esc_attr__( 'Post Date', 'fusion-builder' ),
			],
			'default'     => 'image',
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'radio_button_set',
			'heading'     => esc_attr__( 'Show Excerpt', 'fusion-builder' ),
			'description' => esc_attr__( 'Choose to show the post excerpt on an additional row below the date.', 'fusion-builder' ),
			'param_name'  => 'show_excerpt',
			'value'       => [
				'yes' => esc_attr__( 'Yes', 'fusion-builder' ),
				'no'  => esc_attr__( 'No', 'fusion-builder' ),
			],
			'default'     => 'no',
			'dependency'  => [
				[
					'element'  => 'post_design',
					'value'    => 'image',
					'operator' => '==',
				],
			],
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'radio_button_set',
			'heading'     => esc_attr__( 'Tabs Alignment', 'fusion-builder' ),
			'description' => esc_attr__( 'Choose how the tabs are distributed. "Stretch" spreads them over the full element width.', 'fusion-builder' ),
			'param_name'  => 'alignment',
			'default'     => 'stretch',
			'grid_layout' => true,
			'back_icons'  => true,
			'icons'       => [
				'start'   => '<span class="fusiona-horizontal-flex-start"></span>',
				'center'  => '<span class="fusiona-horizontal-flex-center"></span>',
				'end'     => '<span class="fusiona-horizontal-flex-end"></span>',
				'stretch' => '<span class="fusiona-horizontal-space-between"></span>',
			],
			'value'       => [
				'start'   => esc_html__( 'Start', 'fusion-builder' ),
				'center'  => esc_html__( 'Center', 'fusion-builder' ),
				'end'     => esc_html__( 'End', 'fusion-builder' ),
				'stretch' => esc_html__( 'Stretch', 'fusion-builder' ),
			],
		],

		// --- General: popular posts.
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'Popular Posts Tab Label', 'fusion-builder' ),
			'description' => esc_attr__( 'The label of the popular posts tab. Leave empty to use the default wording.', 'fusion-builder' ),
			'param_name'  => 'popular_label',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'popular_posts',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'iconpicker',
			'heading'     => esc_attr__( 'Popular Posts Tab Icon', 'fusion-builder' ),
			'description' => esc_attr__( 'Click an icon to select, click again to deselect.', 'fusion-builder' ),
			'param_name'  => 'popular_icon',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'popular_posts',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'select',
			'heading'     => esc_attr__( 'Popular Posts Order By', 'fusion-builder' ),
			'description' => esc_attr__( 'Select what popular posts should be sorted by.', 'fusion-builder' ),
			'param_name'  => 'order_by',
			'value'       => [
				'comments' => esc_attr__( 'Comments', 'fusion-builder' ),
				'views'    => esc_attr__( 'Views', 'fusion-builder' ),
			],
			'default'     => 'comments',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'popular_posts',
					'operator' => 'contains',
				],
			],
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Number Of Popular Posts', 'fusion-builder' ),
			'description' => esc_attr__( 'How many popular posts should appear.', 'fusion-builder' ),
			'param_name'  => 'nr_popular_posts',
			'value'       => '3',
			'min'         => '1',
			'max'         => '20',
			'step'        => '1',
			'default'     => '3',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'popular_posts',
					'operator' => 'contains',
				],
			],
			'callback'    => $ajax_render,
		],

		// --- General: recent posts.
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'Recent Posts Tab Label', 'fusion-builder' ),
			'description' => esc_attr__( 'The label of the recent posts tab. Leave empty to use the default wording.', 'fusion-builder' ),
			'param_name'  => 'recent_label',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'recent_posts',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'iconpicker',
			'heading'     => esc_attr__( 'Recent Posts Tab Icon', 'fusion-builder' ),
			'description' => esc_attr__( 'Click an icon to select, click again to deselect.', 'fusion-builder' ),
			'param_name'  => 'recent_icon',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'recent_posts',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Number Of Recent Posts', 'fusion-builder' ),
			'description' => esc_attr__( 'How many recent posts should appear.', 'fusion-builder' ),
			'param_name'  => 'nr_recent_posts',
			'value'       => '3',
			'min'         => '1',
			'max'         => '20',
			'step'        => '1',
			'default'     => '3',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'recent_posts',
					'operator' => 'contains',
				],
			],
			'callback'    => $ajax_render,
		],

		// --- General: comments.
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'Comments Tab Label', 'fusion-builder' ),
			'description' => esc_attr__( 'The label of the comments tab. Leave empty to use the default wording.', 'fusion-builder' ),
			'param_name'  => 'comments_label',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'comments',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'iconpicker',
			'heading'     => esc_attr__( 'Comments Tab Icon', 'fusion-builder' ),
			'description' => esc_attr__( 'Click an icon to select, click again to deselect.', 'fusion-builder' ),
			'param_name'  => 'comments_icon',
			'value'       => '',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'comments',
					'operator' => 'contains',
				],
			],
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Number Of Comments', 'fusion-builder' ),
			'description' => esc_attr__( 'How many recent comments should appear.', 'fusion-builder' ),
			'param_name'  => 'nr_comments',
			'value'       => '3',
			'min'         => '1',
			'max'         => '20',
			'step'        => '1',
			'default'     => '3',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'comments',
					'operator' => 'contains',
				],
			],
			'callback'    => $ajax_render,
		],

		// --- General: content length.
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Excerpt Length', 'fusion-builder' ),
			'description' => esc_attr__( 'The length of the post excerpt. Words or characters, depending on the "Excerpt Base" global option.', 'fusion-builder' ),
			'param_name'  => 'excerpt_words',
			'value'       => '15',
			'min'         => '1',
			'max'         => '100',
			'step'        => '1',
			'default'     => '15',
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Comment Length', 'fusion-builder' ),
			'description' => esc_attr__( 'The number of words shown of each comment.', 'fusion-builder' ),
			'param_name'  => 'comment_words',
			'value'       => '12',
			'min'         => '1',
			'max'         => '100',
			'step'        => '1',
			'default'     => '12',
			'dependency'  => [
				[
					'element'  => 'tabs_showing',
					'value'    => 'comments',
					'operator' => 'contains',
				],
			],
			'callback'    => $ajax_render,
		],

		// --- Design: element wide.
		'fusion_margin_placeholder' => [
			'param_name' => 'margin',
			'value'      => [
				'margin_top'    => '',
				'margin_right'  => '',
				'margin_bottom' => '',
				'margin_left'   => '',
			],
			'responsive' => [
				'state' => 'large',
			],
		],
		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Border Size', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the border size. The top value also applies to the line that closes the tab row. In pixels or percentage, ex: 10px or 10%. Leave empty to use a default value of 1px.', 'fusion-builder' ),
			'param_name'       => 'border_width',
			'value'            => [
				'border_top'    => '',
				'border_right'  => '',
				'border_bottom' => '',
				'border_left'   => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'radio_button_set',
			'heading'     => esc_attr__( 'Border Style', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the border style.', 'fusion-builder' ),
			'param_name'  => 'border_style',
			'value'       => [
				'solid'  => esc_attr__( 'Solid', 'fusion-builder' ),
				'dashed' => esc_attr__( 'Dashed', 'fusion-builder' ),
				'dotted' => esc_attr__( 'Dotted', 'fusion-builder' ),
			],
			'default'     => 'solid',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Border Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the border color.', 'fusion-builder' ),
			'param_name'  => 'border_color',
			'value'       => '',
			'default'     => $fusion_settings->get( 'tabs_border_color' ),
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],

		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Border Radius', 'fusion-builder' ),
			'description'      => esc_attr__( 'In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ),
			'param_name'       => 'border_radius',
			'value'            => [
				'radius_top_left'     => '',
				'radius_top_right'    => '',
				'radius_bottom_right' => '',
				'radius_bottom_left'  => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
		],

		// --- Design: tabs.
		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Tab Padding', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the padding of the tabs. In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ),
			'param_name'       => 'tab_padding',
			'value'            => [
				'tab_padding_top'    => '',
				'tab_padding_right'  => '',
				'tab_padding_bottom' => '',
				'tab_padding_left'   => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Tab Indicator Bar Size', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the height of the bar on top of the tabs that indicates the active tab. Set to 0 to hide it. In pixels.', 'fusion-builder' ),
			'param_name'  => 'tab_bar_size',
			'default'     => '4',
			'min'         => '0',
			'max'         => '15',
			'step'        => '0.5',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'          => 'colorpickeralpha',
			'heading'       => esc_attr__( 'Tab Top Bar Color', 'fusion-builder' ),
			'description'   => esc_attr__( 'Controls the color of the top bar of the tab.', 'fusion-builder' ),
			'param_name'    => 'tab_bar_color',
			'value'         => '',
			'default'       => $fusion_settings->get( 'tabs_border_color' ),
			'group'         => esc_attr__( 'Design', 'fusion-builder' ),
			'states'        => [
				'hover'  => [
					'label'      => esc_attr__( 'Hover', 'fusion-builder' ),
					'param_name' => 'hover_tab_bar_color',
					'default'    => $fusion_settings->get( 'primary_color' ),
				],
				'active' => [
					'label'      => esc_attr__( 'Active', 'fusion-builder' ),
					'param_name' => 'active_tab_bar_color',
					'default'    => $fusion_settings->get( 'primary_color' ),
				],
			],
			'connect-state' => [ 'tab_bg_color', 'hover_tab_bg_color', 'active_tab_bg_color', 'tab_color', 'hover_tab_color', 'active_tab_color', 'icon_color', 'hover_icon_color', 'active_icon_color' ],
			'dependency'    => [
				[
					'element'  => 'tab_bar_size',
					'value'    => '0',
					'operator' => '!=',
				],
			],
		],
		[
			'type'          => 'colorpickeralpha',
			'heading'       => esc_attr__( 'Tab Background Color', 'fusion-builder' ),
			'description'   => esc_attr__( 'Controls the background color of the inactive tab.', 'fusion-builder' ),
			'param_name'    => 'tab_bg_color',
			'value'         => '',
			'default'       => $fusion_settings->get( 'tabs_inactive_color' ),
			'group'         => esc_attr__( 'Design', 'fusion-builder' ),
			'states'        => [
				'hover'  => [
					'label'      => esc_attr__( 'Hover', 'fusion-builder' ),
					'default'    => $fusion_settings->get( 'tabs_bg_color' ),
					'param_name' => 'hover_tab_bg_color',
				],
				'active' => [
					'label'      => esc_attr__( 'Active', 'fusion-builder' ),
					'param_name' => 'active_tab_bg_color',
					'default'    => $fusion_settings->get( 'tabs_bg_color' ),
				],
			],
			'connect-state' => [ 'tab_color', 'hover_tab_color', 'active_tab_color', 'tab_bar_color', 'hover_tab_bar_color', 'active_tab_bar_color', 'icon_color', 'hover_icon_color', 'active_icon_color' ],
		],
		[
			'type'             => 'typography',
			'remove_from_atts' => true,
			'global'           => true,
			'heading'          => esc_attr__( 'Tab Title Typography', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the tab typography.', 'fusion-builder' ),
			'param_name'       => 'tab_typography',
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
			'choices'          => [
				'font-family'    => 'tab_font',
				'font-size'      => 'tab_font_size',
				'line-height'    => 'tab_line_height',
				'letter-spacing' => 'tab_letter_spacing',
				'text-transform' => 'tab_text_transform',
			],
			'default'          => [
				'font-family'    => '',
				'variant'        => '',
				'font-size'      => '',
				'line-height'    => '',
				'letter-spacing' => '',
				'text-transform' => '',
			],
		],
		[
			'type'          => 'colorpickeralpha',
			'heading'       => esc_attr__( 'Tab Title Color', 'fusion-builder' ),
			'description'   => esc_attr__( 'Controls the text color of the inactive tab.', 'fusion-builder' ),
			'param_name'    => 'tab_color',
			'value'         => '',
			'default'       => $fusion_settings->get( 'tabs_title_color' ),
			'group'         => esc_attr__( 'Design', 'fusion-builder' ),
			'states'        => [
				'hover'  => [
					'label'      => esc_attr__( 'Hover', 'fusion-builder' ),
					'default'    => $fusion_settings->get( 'tabs_active_title_color' ),
					'param_name' => 'hover_tab_color',
				],
				'active' => [
					'label'      => esc_attr__( 'Active', 'fusion-builder' ),
					'param_name' => 'active_tab_color',
					'default'    => $fusion_settings->get( 'tabs_active_title_color' ),
				],
			],
			'connect-state' => [ 'tab_bg_color', 'hover_tab_bg_color', 'active_tab_bg_color', 'tab_bar_color', 'hover_tab_bar_color', 'active_tab_bar_color', 'icon_color', 'hover_icon_color', 'active_icon_color' ],
		],
		[
			'heading'     => esc_html__( 'Tab Icon Position', 'fusion-builder' ),
			'description' => esc_html__( 'Choose the position of the icon on the tab. Icons can be selected per tab in the general tab.', 'fusion-builder' ),
			'param_name'  => 'icon_position',
			'default'     => $fusion_settings->get( 'tabs_icon_position' ),
			'type'        => 'radio_button_set',
			'value'       => [
				'left'  => esc_attr__( 'Left', 'fusion-builder' ),
				'right' => esc_attr__( 'Right', 'fusion-builder' ),
				'top'   => esc_attr__( 'Top', 'fusion-builder' ),
			],
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'heading'     => esc_html__( 'Tab Icon Size', 'fusion-builder' ),
			'description' => esc_html__( 'Set the size of the icon. In pixels, ex: 13px.', 'fusion-builder' ),
			'param_name'  => 'icon_size',
			'default'     => $fusion_settings->get( 'tabs_icon_size' ),
			'min'         => '1',
			'max'         => '150',
			'step'        => '1',
			'type'        => 'range',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'          => 'colorpickeralpha',
			'heading'       => esc_attr__( 'Tab Icon Color', 'fusion-builder' ),
			'description'   => esc_attr__( 'Controls the color of the tab icon.', 'fusion-builder' ),
			'param_name'    => 'icon_color',
			'value'         => '',
			'default'       => $fusion_settings->get( 'tabs_icon_color' ),
			'group'         => esc_attr__( 'Design', 'fusion-builder' ),
			'states'        => [
				'hover'  => [
					'label'      => esc_attr__( 'Hover', 'fusion-builder' ),
					'param_name' => 'hover_icon_color',
					'default'    => $fusion_settings->get( 'tabs_active_icon_color' ),
				],
				'active' => [
					'label'      => esc_attr__( 'Active', 'fusion-builder' ),
					'param_name' => 'active_icon_color',
					'default'    => $fusion_settings->get( 'tabs_active_icon_color' ),
				],
			],
			'connect-state' => [ 'tab_bg_color', 'hover_tab_bg_color', 'active_tab_bg_color', 'tab_color', 'hover_tab_color', 'active_tab_color', 'tab_bar_color', 'hover_tab_bar_color', 'active_tab_bar_color' ],
		],

		// --- Design: tab content.
		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Content Items Padding', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the padding of the items in the tab content. In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ),
			'param_name'       => 'content_padding',
			'value'            => [
				'content_padding_top'    => '',
				'content_padding_right'  => '',
				'content_padding_bottom' => '',
				'content_padding_left'   => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Separator Size', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the size of the separator between the items in the tab content. Set to 0 to hide it. In pixels.', 'fusion-builder' ),
			'param_name'  => 'separator_size',
			'default'     => '1',
			'min'         => '0',
			'max'         => '15',
			'step'        => '0.5',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'radio_button_set',
			'heading'     => esc_attr__( 'Separator Style', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the style of the separator.', 'fusion-builder' ),
			'param_name'  => 'separator_style',
			'value'       => [
				'solid'  => esc_attr__( 'Solid', 'fusion-builder' ),
				'dashed' => esc_attr__( 'Dashed', 'fusion-builder' ),
				'dotted' => esc_attr__( 'Dotted', 'fusion-builder' ),
			],
			'default'     => 'solid',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
			'dependency'  => [
				[
					'element'  => 'separator_size',
					'value'    => '0',
					'operator' => '!=',
				],
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Separator Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the separator color.', 'fusion-builder' ),
			'param_name'  => 'separator_color',
			'value'       => '',
			'default'     => $fusion_settings->get( 'tabs_border_color' ),
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
			'dependency'  => [
				[
					'element'  => 'separator_size',
					'value'    => '0',
					'operator' => '!=',
				],
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Content Background Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the background color of the tab content.', 'fusion-builder' ),
			'param_name'  => 'bg_color',
			'value'       => '',
			'default'     => $fusion_settings->get( 'tabs_bg_color' ),
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		// --- Design: image / date block.
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Image Width', 'fusion-builder' ),
			'description' => esc_attr__( 'Set the width of the featured image and the comment avatar, in pixels. The date block instead sizes to its text and padding.', 'fusion-builder' ),
			'param_name'  => 'image_width',
			'value'       => '66',
			'min'         => '24',
			'max'         => '200',
			'step'        => '1',
			'default'     => '66',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
			'callback'    => $ajax_render,
		],
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'Image/Date Gap', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the space between the image or date block and the text. Enter value including any valid CSS unit, ex: 12px.', 'fusion-builder' ),
			'param_name'  => 'image_date_gap',
			'value'       => '',
			'default'     => '12px',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		// --- Design: date text.
		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Date Padding', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the padding of the date block, which sizes to its text. In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ),
			'param_name'       => 'date_padding',
			'value'            => [
				'date_padding_top'    => '',
				'date_padding_right'  => '',
				'date_padding_bottom' => '',
				'date_padding_left'   => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
			'dependency'       => [
				[
					'element'  => 'post_design',
					'value'    => 'post_date',
					'operator' => '==',
				],
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Date Background Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the background color of the date block.', 'fusion-builder' ),
			'param_name'  => 'date_bg_color',
			'value'       => '',
			'default'     => $fusion_settings->get( 'tabs_inactive_color' ),
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'             => 'dimension',
			'remove_from_atts' => true,
			'heading'          => esc_attr__( 'Image/Date Border Radius', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the border radius of the featured image, the date block and the comment avatar. In pixels or percentage, ex: 10px or 50%.', 'fusion-builder' ),
			'param_name'       => 'image_date_border_radius',
			'value'            => [
				'image_date_radius_top_left'     => '',
				'image_date_radius_top_right'    => '',
				'image_date_radius_bottom_right' => '',
				'image_date_radius_bottom_left'  => '',
			],
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'             => 'typography',
			'remove_from_atts' => true,
			'global'           => true,
			'heading'          => esc_attr__( 'Date Typography', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the date typography.', 'fusion-builder' ),
			'param_name'       => 'date_typography',
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
			'choices'          => [
				'font-family'    => 'date_font',
				'font-size'      => 'date_font_size',
				'line-height'    => 'date_line_height',
				'letter-spacing' => 'date_letter_spacing',
				'text-transform' => 'date_text_transform',
			],
			'default'          => [
				'font-family'    => '',
				'variant'        => '',
				'font-size'      => '',
				'line-height'    => '',
				'letter-spacing' => '',
				'text-transform' => '',
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Date Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the text color of the date.', 'fusion-builder' ),
			'param_name'  => 'date_color',
			'value'       => '',
			'default'     => '',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],

		// --- Design: title.
		[
			'type'             => 'typography',
			'remove_from_atts' => true,
			'global'           => true,
			'heading'          => esc_attr__( 'Title Typography', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the title typography.', 'fusion-builder' ),
			'param_name'       => 'title_typography',
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
			'choices'          => [
				'font-family'    => 'title_font',
				'font-size'      => 'title_font_size',
				'line-height'    => 'title_line_height',
				'letter-spacing' => 'title_letter_spacing',
				'text-transform' => 'title_text_transform',
			],
			'default'          => [
				'font-family'    => '',
				'variant'        => '',
				'font-size'      => '',
				'line-height'    => '',
				'letter-spacing' => '',
				'text-transform' => '',
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Title Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the color of the title.', 'fusion-builder' ),
			'param_name'  => 'title_color',
			'value'       => '',
			'default'     => '',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Link Hover Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the hover color of the title and content links.', 'fusion-builder' ),
			'param_name'  => 'link_hover_color',
			'value'       => '',
			'default'     => $fusion_settings->get( 'link_hover_color' ),
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],


		// --- Design: content text.
		[
			'type'        => 'range',
			'heading'     => esc_attr__( 'Content Lines Clamp', 'fusion-builder' ),
			'description' => esc_attr__( 'How many lines to clamp the content for post excerpt and comments.', 'fusion-builder' ),
			'param_name'  => 'content_lines_clamp',
			'value'       => '3',
			'min'         => '1',
			'max'         => '10',
			'step'        => '1',
			'default'     => '3',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		[
			'type'             => 'typography',
			'remove_from_atts' => true,
			'global'           => true,
			'heading'          => esc_attr__( 'Content Typography', 'fusion-builder' ),
			'description'      => esc_attr__( 'Controls the typography of the post excerpt and comment text.', 'fusion-builder' ),
			'param_name'       => 'content_typography',
			'group'            => esc_attr__( 'Design', 'fusion-builder' ),
			'choices'          => [
				'font-family'    => 'content_font',
				'font-size'      => 'content_font_size',
				'line-height'    => 'content_line_height',
				'letter-spacing' => 'content_letter_spacing',
				'text-transform' => 'content_text_transform',
			],
			'default'          => [
				'font-family'    => '',
				'variant'        => '',
				'font-size'      => '',
				'line-height'    => '',
				'letter-spacing' => '',
				'text-transform' => '',
			],
		],
		[
			'type'        => 'colorpickeralpha',
			'heading'     => esc_attr__( 'Content Color', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls the text color of the post excerpt and comment text.', 'fusion-builder' ),
			'param_name'  => 'content_color',
			'value'       => '',
			'default'     => '',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		],
		'fusion_conditional_render_placeholder' => [],
		'fusion_animation_placeholder'          => [
			'preview_selector' => '.awb-rec-tabs',
		],
		[
			'type'        => 'checkbox_button_set',
			'heading'     => esc_attr__( 'Element Visibility', 'fusion-builder' ),
			'param_name'  => 'hide_on_mobile',
			'value'       => fusion_builder_visibility_options( 'full' ),
			'default'     => fusion_builder_default_visibility( 'array' ),
			'description' => esc_attr__( 'Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.', 'fusion-builder' ),
		],
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'CSS Class', 'fusion-builder' ),
			'param_name'  => 'class',
			'value'       => '',
			'description' => esc_attr__( 'Add a class to the wrapping HTML element.', 'fusion-builder' ),
		],
		[
			'type'        => 'textfield',
			'heading'     => esc_attr__( 'CSS ID', 'fusion-builder' ),
			'param_name'  => 'id',
			'value'       => '',
			'description' => esc_attr__( 'Add an ID to the wrapping HTML element.', 'fusion-builder' ),
		],
		'awb_attributes_placeholder'            => [],
	];

	fusion_builder_map(
		fusion_builder_frontend_data(
			'FusionSC_RecentActivityTabs',
			[
				'name'         => esc_attr__( 'Recent Activity Tabs', 'fusion-builder' ),
				'shortcode'    => 'awb_recent_activity_tabs',
				'icon'         => 'fusiona-list-alt',
				'callback'     => [
					'function' => 'fusion_ajax',
					'action'   => 'get_awb_recent_activity_tabs',
					'ajax'     => true,
				],
				'subparam_map' => [
					'fusion_font_family_tab_font'      => 'tab_typography',
					'fusion_font_variant_tab_font'     => 'tab_typography',
					'tab_font_size'                    => 'tab_typography',
					'tab_line_height'                  => 'tab_typography',
					'tab_letter_spacing'               => 'tab_typography',
					'tab_text_transform'               => 'tab_typography',

					'fusion_font_family_title_font'    => 'title_typography',
					'fusion_font_variant_title_font'   => 'title_typography',
					'title_font_size'                  => 'title_typography',
					'title_line_height'                => 'title_typography',
					'title_letter_spacing'             => 'title_typography',
					'title_text_transform'             => 'title_typography',

					'fusion_font_family_content_font'  => 'content_typography',
					'fusion_font_variant_content_font' => 'content_typography',
					'content_font_size'                => 'content_typography',
					'content_line_height'              => 'content_typography',
					'content_letter_spacing'           => 'content_typography',
					'content_text_transform'           => 'content_typography',

					'fusion_font_family_date_font'     => 'date_typography',
					'fusion_font_variant_date_font'    => 'date_typography',
					'date_font_size'                   => 'date_typography',
					'date_line_height'                 => 'date_typography',
					'date_letter_spacing'              => 'date_typography',
					'date_text_transform'              => 'date_typography',
				],
				'params'       => $params,
			]
		)
	);
}
add_action( 'fusion_builder_wp_loaded', 'awb_recent_activity_tabs_element' );