File: //proc/self/cwd/wp-content/plugins/elementskit/widgets/comparison-table/comparison-table.php
<?php
namespace Elementor;
use \Elementor\ElementsKit_Widget_Comparison_Table_Handler as Handler;
defined('ABSPATH') || exit;
class ElementsKit_Widget_Comparison_Table extends Widget_Base {
use \ElementsKit_Lite\Widgets\Widget_Notice;
public $base;
public function get_name() {
return Handler::get_name();
}
public function get_title() {
return Handler::get_title();
}
public function get_icon() {
return Handler::get_icon();
}
public function get_categories() {
return Handler::get_categories();
}
public function get_keywords() {
return Handler::get_keywords();
}
public function get_help_url() {
return 'https://wpmet.com/doc/comparison-table/';
}
protected function is_dynamic_content(): bool {
return false;
}
protected function register_controls() {
$this->start_controls_section(
'ekit_cp_table_heading_content_section',
[
'label' => esc_html__('Table Heading', 'elementskit'),
]
);
$repeater_body = new Repeater();
$repeater_body->add_responsive_control(
'ekit_cp_table_heading_cell_width',
[
'label' => __( 'Cell Width', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'frontend_available' => true,
'size_units' => ['%', 'px'],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
],
'px' => [
'min' => 0,
'max' => 2000,
'step' => 1,
],
],
'default' => [
'size' => 50,
'unit' => '%',
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}}',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_text',
[
'label' => esc_html__( 'Content', 'elementskit' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Row' , 'elementskit' ),
'show_label' => false,
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_url_show',
[
'label' => esc_html__('Add a url? ', 'elementskit'),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'label_on' =>esc_html__( 'Yes', 'elementskit' ),
'label_off' =>esc_html__( 'No', 'elementskit' ),
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_url',
[
'label' =>esc_html__( 'URL', 'elementskit' ),
'type' => Controls_Manager::URL,
'placeholder' =>esc_url('https://wpmet.com'),
'condition' => [
'ekit_cp_table_heading_cell_url_show' => 'yes'
],
'dynamic' => [
'active' => true,
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_icon_type',
[
'label' => esc_html__( 'Type', 'elementskit' ),
'label_block' => false,
'type' => Controls_Manager::CHOOSE,
'options' => [
'none' => [
'title' => esc_html__( 'None', 'elementskit' ),
'icon' => 'eicon-ban',
],
'icon' => [
'title' => esc_html__( 'Icon', 'elementskit' ),
'icon' => 'eicon-star',
],
'image' => [
'title' => esc_html__( 'Image', 'elementskit' ),
'icon' => 'eicon-image',
],
],
'default' => 'none'
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_icons',
[
'label' => __( 'Icon', 'elementskit' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'body_cell_icon',
'default' => [
'value' => '',
],
'condition' => [
'ekit_cp_table_heading_cell_icon_type' => 'icon',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_image',
[
'label' => esc_html__( 'Image', 'elementskit' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
'id' => -1
],
'condition' => [
'ekit_cp_table_heading_cell_icon_type' => 'image',
],
'dynamic' => [
'active' => true,
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_icon_position',
[
'label' => esc_html__( 'Position', 'elementskit' ),
'type' => Controls_Manager::SELECT,
'default' => 'before',
'options' => [
'before' => esc_html__( 'Before', 'elementskit' ),
'after' => esc_html__( 'After', 'elementskit' ),
'top' => esc_html__( 'Top', 'elementskit' ),
'bottom' => esc_html__( 'Bottom', 'elementskit' ),
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_image_width',
[
'label' => esc_html__( 'Image Width', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%'],
'range' => [
'px' => [
'min' => 0,
'max' => 300,
'step' => 1,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-row {{CURRENT_ITEM}}.ekit-comparison-table-heading-cell a > img' => 'width: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-row {{CURRENT_ITEM}}.ekit-comparison-table-heading-cell li > img' => 'width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'ekit_cp_table_heading_cell_icon_type' => 'image',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_btn',
[
'label' => __( 'Button', 'elementskit' ),
'type' => Controls_Manager::SWITCHER,
'default' => '',
'return_value' => 'yes',
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_btn_text',
[
'label' => esc_html__( 'Button Text', 'elementskit' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Read More', 'elementskit' ),
'placeholder' => esc_html__( 'Type your title here', 'elementskit' ),
'condition' => [
'ekit_cp_table_heading_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_btn_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-row {{CURRENT_ITEM}} .ekit-comparison-table-heading-button' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_heading_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_cell_btn_bg',
[
'label' => esc_html__( 'Background', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-row {{CURRENT_ITEM}} .ekit-comparison-table-heading-button' => 'background-color: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_heading_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_heading_align',
[
'label' => esc_html__( 'Alignment', 'elementskit' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'start' => [
'title' => esc_html__( 'Left', 'elementskit' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'elementskit' ),
'icon' => 'eicon-text-align-center',
],
'end' => [
'title' => esc_html__( 'Right', 'elementskit' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} a, {{WRAPPER}} {{CURRENT_ITEM}} li' => 'align-items: {{VALUE}}; justify-content: flex-{{VALUE}}; justify-content: {{VALUE}};',
'{{WRAPPER}} {{CURRENT_ITEM}} .ekit-comparison-table-heading-btn' => 'justify-content: flex-{{VALUE}}; justify-content: {{VALUE}};',
],
]
);
$this->add_control(
'ekit_cp_table_heading_content',
[
'type' => Controls_Manager::REPEATER,
'default' => [
[
'ekit_cp_table_heading_element' => 'cell',
'cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_heading_element' => 'cell',
'ekit_cp_table_heading_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_heading_element' => 'cell',
'ekit_cp_table_heading_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_heading_element' => 'cell',
'ekit_cp_table_heading_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_heading_element' => 'cell',
'ekit_cp_table_heading_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_heading_element' => 'cell',
'ekit_cp_table_heading_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
],
'fields' => $repeater_body->get_controls(),
'title_field' => ' {{{ ekit_cp_table_heading_cell_text }}}',
]
);
$this->end_controls_section();
// table body cell
$this->start_controls_section(
'ekit_cp_table_content_section',
[
'label' => esc_html__('Table Body', 'elementskit'),
]
);
$repeater_body = new Repeater();
$repeater_body->add_control(
'ekit_cp_table_row', [
'label' => esc_html__( 'New Row', 'elementskit' ),
'type' => Controls_Manager::SWITCHER,
'label_off' => esc_html__( 'No', 'elementskit' ),
'label_on' => esc_html__( 'Yes', 'elementskit' ),
'return_value' => esc_html__( 'Row', 'elementskit' ),
]
);
$repeater_body->add_responsive_control(
'ekit_cp_table_column_width',
[
'label' => __( 'Column Width', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'frontend_available' => true,
'size_units' => ['%', 'px'],
'range' => [
'%' => [
'min' => 0,
'max' => 100,
],
'px' => [
'min' => 0,
'max' => 2000,
'step' => 1,
],
],
'default' => [
'size' => 50,
'unit' => '%',
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}}',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_text',
[
'label' => esc_html__( 'Content', 'elementskit' ),
'type' => Controls_Manager::WYSIWYG,
'default' => esc_html__( 'Column' , 'elementskit' ),
'show_label' => false,
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_url_show',
[
'label' => esc_html__('Add a url? ', 'elementskit'),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'label_on' =>esc_html__( 'Yes', 'elementskit' ),
'label_off' =>esc_html__( 'No', 'elementskit' ),
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_url',
[
'label' =>esc_html__( 'URL', 'elementskit' ),
'type' => Controls_Manager::URL,
'placeholder' =>esc_url('https://wpmet.com'),
'condition' => [
'ekit_cp_table_body_cell_url_show' => 'yes'
],
'dynamic' => [
'active' => true,
],
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_icon_type',
[
'label' => esc_html__( 'Type', 'elementskit' ),
'label_block' => false,
'type' => Controls_Manager::CHOOSE,
'options' => [
'none' => [
'title' => esc_html__( 'None', 'elementskit' ),
'icon' => 'eicon-ban',
],
'icon' => [
'title' => esc_html__( 'Icon', 'elementskit' ),
'icon' => 'eicon-star',
],
'image' => [
'title' => esc_html__( 'Image', 'elementskit' ),
'icon' => 'eicon-image',
],
],
'default' => 'none',
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_icons',
[
'label' => __( 'Icon', 'elementskit' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'body_cell_icon',
'default' => [
'value' => '',
],
'condition' => [
'ekit_cp_table_body_cell_icon_type' => 'icon',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_icon_image',
[
'label' => esc_html__( 'Image', 'elementskit' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
'id' => -1
],
'condition' => [
'ekit_cp_table_body_cell_icon_type' => 'image',
],
'dynamic' => [
'active' => true,
],
]
);
$repeater_body->add_control(
'ekit_cp_table_body_cell_icon_position',
[
'label' => esc_html__( 'Icon Position', 'elementskit' ),
'type' => Controls_Manager::SELECT,
'default' => 'before',
'options' => [
'before' => esc_html__( 'Before', 'elementskit' ),
'after' => esc_html__( 'After', 'elementskit' ),
'top' => esc_html__( 'Top', 'elementskit' ),
'bottom' => esc_html__( 'Bottom', 'elementskit' ),
],
]
);
$repeater_body->add_control(
'ekit_cp_table_body_image_width',
[
'label' => esc_html__( 'Image Width', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%'],
'range' => [
'px' => [
'min' => 0,
'max' => 300,
'step' => 1,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}}.ekit-comparison-table-cell a > img' => 'width: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} {{CURRENT_ITEM}}.ekit-comparison-table-cell li > img' => 'width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'ekit_cp_table_body_cell_icon_type' => 'image',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_btn',
[
'label' => __( 'Button', 'elementskit' ),
'type' => Controls_Manager::SWITCHER,
'default' => '',
'return_value' => 'yes',
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_btn_text',
[
'label' => esc_html__( 'Button Text', 'elementskit' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Read More', 'elementskit' ),
'placeholder' => esc_html__( 'Type your title here', 'elementskit' ),
'condition' => [
'ekit_cp_table_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_btn_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-row {{CURRENT_ITEM}} .ekit-cp-table-button' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_btn_bg',
[
'label' => esc_html__( 'Background', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .ekit-cp-table-button' => 'background: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_cell_btn' => 'yes',
],
]
);
$repeater_body->add_control(
'ekit_cp_table_cell_btn_align',
[
'label' => esc_html__( 'Alignment', 'elementskit' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'start' => [
'title' => esc_html__( 'Left', 'elementskit' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'elementskit' ),
'icon' => 'eicon-text-align-center',
],
'end' => [
'title' => esc_html__( 'Right', 'elementskit' ),
'icon' => 'eicon-text-align-right',
],
],
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} a, {{WRAPPER}} {{CURRENT_ITEM}} li' => 'align-items: {{VALUE}}; text-align: {{VALUE}}; justify-content: flex-{{VALUE}}; justify-content: {{VALUE}};',
'{{WRAPPER}} {{CURRENT_ITEM}} .ekit-comparison-table-bcell-btn' => 'justify-content: flex-{{VALUE}}; justify-content: {{VALUE}};',
],
'default' => 'center',
]
);
$this->add_control(
'ekit_cp_table_body_content',
[
'type' => Controls_Manager::REPEATER,
'default' => [
[
'ekit_cp_table_body_element' => 'cell',
'cell_text' => esc_html__( 'Row', 'elementskit' ),
'ekit_cp_table_row' => 'Row',
],
[
'ekit_cp_table_body_element' => 'cell',
'cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_body_element' => 'cell',
'ekit_cp_table_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_body_element' => 'cell',
'ekit_cp_table_cell_text' => esc_html__( 'Row', 'elementskit' ),
'ekit_cp_table_row' => 'Row',
],
[
'ekit_cp_table_body_element' => 'cell',
'ekit_cp_table_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
[
'ekit_cp_table_body_element' => 'cell',
'ekit_cp_table_cell_text' => esc_html__( 'Column', 'elementskit' ),
],
],
'fields' => $repeater_body->get_controls(),
'title_field' => '{{{ ekit_cp_table_row }}}: {{{ ekit_cp_table_cell_text }}}',
]
);
$this->end_controls_section();
// table button repeater section
$this->start_controls_section(
'ekit_cp_table_button_section',
[
'label' => esc_html__('Table Button', 'elementskit'),
]
);
$repeater = new Repeater();
$repeater->add_control(
'ekit_cp_table_btn_title',
[
'label' => esc_html__( 'Title', 'elementskit' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Buy Now', 'elementskit' ),
'placeholder' => esc_html__( 'Comparison Table', 'elementskit' ),
]
);
$repeater->add_control(
'ekit_cp_table_btn_link',
[
'label' => esc_html__( 'Link', 'elementskit' ),
'type' => Controls_Manager::URL,
'placeholder' => esc_html__( 'https:wpmet.com', 'elementskit' ),
'show_external' => true,
'default' => [
'url' => '#',
'is_external' => true,
'nofollow' => true,
],
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'ekit_cp_table_button_list',
[
'label' => esc_html__( 'Buttons', 'elementskit' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'btn_title' => esc_html__( 'Download', 'elementskit' ),
'link' => [
'url' => '#',
'is_external' => true,
'nofollow' => true,
],
],
[
'btn_title' => esc_html__( 'Buy Now', 'elementskit' ),
'link' => [
'url' => '#',
'is_external' => true,
'nofollow' => true,
],
],
],
'title_field' => '{{{ ekit_cp_table_btn_title }}}',
'prevent_empty' => false,
]
);
$this->end_controls_section();
//Table Compare Section
$this->start_controls_section(
'ekit_cp_table_compare_button_section',
[
'label' => esc_html__( 'Compare Button', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_compare_button_switch',
[
'label' => esc_html__( 'Button Style', 'elementskit' ),
'type' => Controls_Manager::SELECT,
'default' => 'inline',
'options' => [
'inline' => esc_html__( 'Inline Style', 'elementskit' ),
'tab' => esc_html__( 'Tab Style', 'elementskit' ),
],
]
);
$this->add_control(
'ekit_cp_table_compare_full_button_text',
[
'label' => esc_html__( 'Full Button', 'elementskit' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Full', 'elementskit' ),
'placeholder' => esc_html__( 'Type your title here', 'elementskit' ),
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_control(
'ekit_cp_table_compare_button_text',
[
'label' => esc_html__( 'Difference Button', 'elementskit' ),
'type' => Controls_Manager::TEXT,
'default' => esc_html__( 'Difference', 'elementskit' ),
'placeholder' => esc_html__( 'Type your title here', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_compare_button_position',
[
'label' => esc_html__( 'Position', 'elementskit' ),
'type' => Controls_Manager::SELECT,
'default' => 'bottom',
'options' => [
'top' => esc_html__( 'Top', 'elementskit' ),
'bottom' => esc_html__( 'Bottom', 'elementskit' ),
],
'condition' => [
'ekit_cp_table_compare_button_text!' => '',
'ekit_cp_table_compare_full_button_text!' => '',
],
]
);
$this->end_controls_section();
//Table wrapper Style Section
$this->start_controls_section(
'ekit_cp_table_wrapper_style', [
'label' => esc_html__( 'Wrapper', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->start_controls_tabs(
'ekit_cp_table_wrapper_tabs'
);
$this->start_controls_tab(
'ekit_cp_table_wrapper_normal_tab',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_wrapper_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-comparison-table-content',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_wrapper_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-content',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_wrapper_border',
'selector' => '{{WRAPPER}} .ekit-comparison-table-content',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_wrapper_hv_tab',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_wrapper_hv_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-comparison-table-content:hover',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_wrapper_hv_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-content:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_wrapper_hv_border',
'selector' => '{{WRAPPER}} .ekit-comparison-table-content:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'ekit_cp_table_wrapper_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%'],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_wrapper_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_wrapper_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table wrapper Style Section
$this->start_controls_section(
'ekit_cp_table_content_style', [
'label' => esc_html__( 'Table Content', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->start_controls_tabs(
'ekit_cp_table_content_tabs'
);
$this->start_controls_tab(
'ekit_cp_table_content_normal_tab',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_content_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_content_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_content_border',
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_content_hv_tab',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_content_hv_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper:hover',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_content_hv_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_content_hv_border',
'selector' => '{{WRAPPER}} .ekit-comparison-table-wrapper:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'ekit_cp_table_content_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%'],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_content_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_content_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table Heading Style Section
$this->start_controls_section(
'ekit_cp_table_heading_style', [
'label' => esc_html__( 'Table Heading', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'ekit_cp_table_heading_icon',
[
'label' => esc_html__( 'Icon', 'elementskit' ),
'type' => Controls_Manager::HEADING,
]
);
$this->add_control(
'ekit_cp_table_heading_icon_size',
[
'label' => esc_html__( 'Font Size', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'separator' => 'after',
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 15,
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-heading-cell a > :is( i, svg )' => 'font-size: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .ekit-comparison-table-heading-cell li :is( i, svg )' => 'font-size: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_image_radius',
[
'label' =>esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'default' => [
'top' => '',
'right' => '',
'bottom' => '' ,
'left' => '',
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-heading-cell a > img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_icon_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px' ],
'separator' => 'before',
'separator' => 'after',
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-heading-cell a > :is( i, svg )' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-comparison-table-heading-cell a > img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-comparison-table-heading-cell li > :is( i, svg )' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-comparison-table-heading-cell li > img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_heading_typography',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell a, {{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell li',
]
);
$this->start_controls_tabs(
'ekit_cp_table_heading_tabs'
);
$this->start_controls_tab(
'ekit_cp_table_heading_normal_tab',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_heading_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell a, {{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell li' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell a :is( i, svg ), {{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell li :is( i, svg )' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_heading_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-wrapper .ekit-comparison-table-heading .ekit-comparison-table-heading-cell',
'default' => '#fff',
'exclude' => ['image'],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_heading_border',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_heading_hv_tab',
[
'label' => esc_html__( 'hover', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_heading_hv_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell:hover a' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell:hover li' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell a:hover :is( i, svg ), {{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell li:hover :is( i, svg )' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_heading_hv_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell:hover',
'exclude' => ['image']
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_heading_hv_border',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_heading_cell_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'separator' => 'before',
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '5',
'right' => '10',
'bottom' => '5',
'left' => '10',
'unit' => 'px',
],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_cell_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-cell' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_cp_table_style_heading',
[
'label' => esc_html__( 'Table Heading Wrapper', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_heading_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_headin_border',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading',
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_border_radius',
[
'label' => esc_html__('Border Radius', 'elementskit'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_heading_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table Body Style Section
$this->start_controls_section(
'ekit_cp_table_body_style', [
'label' => esc_html__( 'Table Body', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'ekit_cp_table_body_icon',
[
'label' => esc_html__( 'Icon', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'ekit_cp_table_body_icon_size',
[
'label' => esc_html__( 'Font Size', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'separator' => 'after',
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell li :is( i, svg)' => 'font-size: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .ekit-comparison-table-cell a :is( i, svg)' => 'font-size: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_icon_size_image_radius',
[
'label' =>esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%' ],
'default' => [
'top' => '',
'right' => '',
'bottom' => '' ,
'left' => '',
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell a > img, .ekit-comparison-table-cell li > img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_icon_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px' ],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a > :is( i, svg), .ekit-comparison-table-cell li > :is( i, svg)' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a > img, .ekit-wid-con .ekit-comparison-table-cell li > img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_body_typography',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a, {{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell li',
'separator' => 'after',
]
);
$this->start_controls_tabs(
'ekit_cp_table_body_tabs'
);
$this->start_controls_tab(
'ekit_cp_table_body_normal_tab',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_body_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell li' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell li :is( i, svg)' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a :is( i, svg)' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_body_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row',
'exclude' => ['image']
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_body_box_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row',
]
);
$this->add_control(
'ekit_cp_table_odd_bg_heading',
[
'label' => esc_html__( 'Odd Row Background', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_odd_bg',
'types' => [ 'classic', 'gradient' ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row:nth-child(odd) .ekit-comparison-table-cell',
'exclude' => ['image'],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_body_border',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell',
'separator' => 'before',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_body_hv_tab',
[
'label' => esc_html__( 'hover', 'elementskit' ),
]
);
$this->add_control(
'ekit_cp_table_body_hv_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell:hover a, .ekit-wid-con .ekit-comparison-table-cell:hover li' => 'color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell li:hover :is( i, svg)' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell a:hover :is( i, svg)' => 'color: {{VALUE}}; fill: {{VALUE}}; stroke: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_body_hv_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row:hover',
'exclude' => ['image']
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_body_hv_box_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row:hover',
]
);
$this->add_control(
'ekit_cp_table_odd_bg_hv_heading',
[
'label' => esc_html__( 'Odd Row Background', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_cp_table_odd_hv_bg',
'types' => [ 'classic', 'gradient', ],
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row:nth-child(odd):hover',
'exclude' => ['image'],
'default' => '#DEDEDE',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_body_hv_border',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell:hover',
'separator' => 'before',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_body_last_cell_border',
[
'label' => esc_html__( 'Last Cell Border', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'separator' => 'before',
'size_units' => [ 'px' ],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell:last-child' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '5',
'right' => '10',
'bottom' => '5',
'left' => '10',
'unit' => 'px',
],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_cp_table_style_body_row',
[
'label' => esc_html__( 'Table Body Row', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_body_row_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row',
]
);
$this->add_responsive_control(
'ekit_cp_table_body_row_radius',
[
'label' => esc_html__('Border Radius', 'elementskit'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_row_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_body_row_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-body .ekit-comparison-row' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table heading Button Style Section
$this->start_controls_section(
'ekit_cp_table_hcell_button', [
'label' => esc_html__( 'Table Heading Cell Button', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_hcell_button_typography',
'label' => esc_html__( 'Typography', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-btn .ekit-comparison-table-heading-button',
]
);
$this->start_controls_tabs( 'ekit_cp_table_hcell_button_tabs_style' );
$this->start_controls_tab(
'ekit_cp_table_hcell_button_tab_normal',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-btn .ekit-comparison-table-heading-button' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_hcell_button_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_hcell_button_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_hcell_button_hover',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_h_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_h_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button:hover' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_hcell_button_h_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_hcell_button_h_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_hcell_button_border_radius',
[
'label' => esc_html__('Border Radius', 'elementskit'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '5',
'right' => '10',
'bottom' => '5',
'left' => '10',
'unit' => 'px',
],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_hcell_button_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '15',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-heading-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table Cell Button Style Section
$this->start_controls_section(
'ekit_cp_table_bcell_button', [
'label' => esc_html__( 'Table Body Cell Button', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_bcell_button_typography',
'label' => esc_html__( 'Typography', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell .ekit-cp-table-button',
]
);
$this->start_controls_tabs( 'ekit_cp_table_bcell_button_tabs_style' );
$this->start_controls_tab(
'ekit_cp_table_bcell_button_tab_normal',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-cell .ekit-cp-table-button' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_bcell_button_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_bcell_button_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_bcell_button_hover',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_h_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_h_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button:hover' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_bcell_button_h_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_bcell_button_h_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_bcell_button_border_radius',
[
'label' => esc_html__('Border Radius', 'elementskit'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '5',
'right' => '10',
'bottom' => '5',
'left' => '10',
'unit' => 'px',
],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_bcell_button_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '15',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-cell .ekit-cp-table-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
//Table Button Style Section
$this->start_controls_section(
'ekit_cp_table_button_style', [
'label' => esc_html__( 'Table Button', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_button_typography',
'label' => esc_html__( 'Typography', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button',
]
);
$this->start_controls_tabs( 'ekit_cp_table_button_tabs_style' );
$this->start_controls_tab(
'ekit_cp_table_button_tab_normal',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_button_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_button_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_button_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_button_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_button_hover',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_button_h_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_button_h_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button:hover' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_button_h_shadow',
'selector' => '{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_button_h_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_button_radius',
[
'label' =>esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'separator' => 'before',
'size_units' => [ 'px', '%' ],
'default' => [
'top' => '5',
'right' => '5',
'bottom' => '5' ,
'left' => '5',
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_button_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '5',
'right' => '10',
'bottom' => '5',
'left' => '10',
'unit' => 'px',
],
'isLinked' => false,
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_button_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em' ],
'default' => [
'top' => '15',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-comparison-table-button .ekit-cp-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_cp_table_button_align',
[
'label' => esc_html__( 'Alignment', 'elementskit' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'start' => [
'title' => esc_html__( 'Left', 'elementskit' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'elementskit' ),
'icon' => 'eicon-text-align-center',
],
'end' => [
'title' => esc_html__( 'Right', 'elementskit' ),
'icon' => 'eicon-text-align-right',
],
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-comparison-table-button' => 'text-align: {{VALUE}};',
],
'default' => 'center',
]
);
$this->end_controls_section();
//Compare Button Style Section
$this->start_controls_section(
'ekit_cp_table_compare_button', [
'label' => esc_html__( 'Compare Button', 'elementskit' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'ekit_cp_table_compare_button_text!' => '',
'ekit_cp_table_compare_full_button_text!' => '',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_compare_button_typography',
'label' => esc_html__( 'Typography', 'elementskit' ),
'selector' => '{{WRAPPER}} .compare-button-wrap .compare-button, {{WRAPPER}} .ekit-wid-con .ekit-diff-on',
]
);
$this->start_controls_tabs( 'ekit_cp_table_compare_button_tabs_style' );
$this->start_controls_tab(
'ekit_cp_table_compare_button_tab_normal',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button' => 'color: {{VALUE}};',
'{{WRAPPER}} .ekit-wid-con .ekit-diff-on' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button' => 'background-color: {{VALUE}}',
'{{WRAPPER}} .ekit-wid-con .ekit-diff-on' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_compare_button_shadow',
'selector' => '{{WRAPPER}} .compare-button-wrap .compare-button, {{WRAPPER}} .ekit-wid-con .ekit-diff-on',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_compare_button_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .compare-button-wrap .compare-button, {{WRAPPER}} .ekit-wid-con .ekit-diff-on',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_compare_button_hover',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_h_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button:hover, {{WRAPPER}} .ekit-wid-con .ekit-diff-on:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_h_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button:hover, {{WRAPPER}} .ekit-wid-con .ekit-diff-on:hover' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_compare_button_h_shadow',
'selector' => '{{WRAPPER}} .compare-button-wrap .compare-button:hover, {{WRAPPER}} .ekit-wid-con .ekit-diff-on:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_compare_button_h_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .compare-button-wrap .compare-button:hover, {{WRAPPER}} .ekit-wid-con .ekit-diff-on:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_compare_button_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
],
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button, {{WRAPPER}} .ekit-wid-con .ekit-diff-on' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_cp_table_compare_button_heading',
[
'label' => esc_html__( 'Full Compaire Button', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_cfull_button_typography',
'label' => esc_html__( 'Typography', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off',
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->start_controls_tabs( 'ekit_cp_table_cfull_button_tabs_style' );
$this->start_controls_tab(
'ekit_cp_table_cfull_button_tab_normal',
[
'label' => esc_html__( 'Normal', 'elementskit' ),
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_cfull_button_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_cfull_button_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_cfull_button_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_cfull_button_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_cp_table_cfull_button_hover',
[
'label' => esc_html__( 'Hover', 'elementskit' ),
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_cfull_button_h_color',
[
'label' => esc_html__( 'Text Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off:hover' => 'color: {{VALUE}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_cfull_button_h_bg_color',
[
'label' => esc_html__( 'Background Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off:hover' => 'background-color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_cp_table_cfull_button_h_shadow',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off:hover',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'ekit_cp_table_cfull_button_h_border',
'label' => esc_html__( 'Border', 'elementskit' ),
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off:hover',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'ekit_cp_table_cfull_button_border_radius',
[
'label' => esc_html__( 'Border Radius', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '0',
'left' => '0',
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_padding',
[
'label' => esc_html__( 'Padding', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'separator' => 'before',
'size_units' => [ 'px' ],
'default' => [
'top' => '10',
'right' => '10',
'bottom' => '10',
'left' => '10',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .compare-button-wrap .compare-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-wid-con .ekit-diff-on' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_button_margin',
[
'label' => esc_html__( 'Margin', 'elementskit' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px' ],
'default' => [
'top' => '15',
'right' => '0',
'bottom' => '0',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .compare-button-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_cp_table_compare_toggle_style',
[
'label' => esc_html__( 'Compare Toggle Button', 'elementskit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_cp_table_compare_toggle_typography',
'selector' => '{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after',
]
);
$this->add_control(
'ekit_cp_table_compare_toggle_color',
[
'label' => esc_html__( 'Color', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_control(
'ekit_cp_table_compare_toggle_bg',
[
'label' => esc_html__( 'Background', 'elementskit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after' => 'background-color: {{VALUE}}',
],
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_control(
'ekit_cp_table_compare_toggle_width',
[
'label' => esc_html__( 'Width', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 30,
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after' => 'width: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
],
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_toggle_transformx',
[
'label' => esc_html__( 'Transform ( X )', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => -100,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => -200,
'max' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => -5,
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after' => 'transform: translateX({{SIZE}}{{UNIT}}) ;',
],
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_responsive_control(
'ekit_cp_table_compare_toggle_transformy',
[
'label' => esc_html__( 'Transform ( Y )', 'elementskit' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'min' => -100,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => -200,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 86,
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-diff-off::after' => 'top: {{SIZE}}{{UNIT}};',
],
'condition' => [
'ekit_cp_table_compare_button_switch' => 'tab',
],
]
);
$this->add_control(
'ekit_cp_table_compare_button_align',
[
'label' => esc_html__( 'Alignment', 'elementskit' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'elementskit' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'elementskit' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'elementskit' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
'toggle' => true,
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .compare-button-wrap' => 'text-align: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
echo '<div class="ekit-wid-con" >';
$this->render_raw();
echo '</div>';
}
protected function render_raw() {
$settings = $this->get_settings_for_display();
extract($settings);
$row_open = '<div class="ekit-comparison-row">';
$row_close = '</div>';
$count = 0;
?>
<?php if($ekit_cp_table_compare_button_position === 'top'): ?>
<div class="compare-button-wrap">
<?php if($ekit_cp_table_compare_button_switch === 'inline'): ?>
<button id="buttonId" class="compare-button"><?php echo esc_html_e($ekit_cp_table_compare_button_text, 'elementskit'); ?></button>
<?php endif;
if($ekit_cp_table_compare_button_switch === 'tab'): ?>
<div class="ekit-diff-toggle on" id="buttonId">
<span class="ekit-diff-off"><?php esc_html_e($ekit_cp_table_compare_full_button_text, 'elementskit'); ?></span>
<span class="ekit-diff-on"><?php esc_html_e($ekit_cp_table_compare_button_text, 'elementskit'); ?></span>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="ekit-comparison-table-content">
<div class="ekit-comparison-table-wrapper">
<div class="ekit-comparison-table-heading">
<div class="ekit-comparison-row">
<?php foreach($settings['ekit_cp_table_heading_content'] as $index => $item) :
!empty($item['ekit_cp_table_heading_cell_url']['url']) && $this->add_link_attributes('ekit_cp_table_heading_cell_url'.$item['_id'], $item['ekit_cp_table_heading_cell_url']);
?>
<div class="ekit-comparison-table-heading-cell elementor-repeater-item-<?php echo esc_attr($item['_id']); ?> <?php echo esc_attr($item['ekit_cp_table_heading_cell_icon_position']); ?>">
<?php if (empty($item['ekit_cp_table_heading_cell_url']['url'])): ?>
<li>
<?php require Handler::get_dir() . 'styles/heading-cell.php'; ?>
</li>
<?php else: ?>
<a <?php $this->print_render_attribute_string('ekit_cp_table_heading_cell_url'.$item['_id']); ?> >
<?php require Handler::get_dir() . 'styles/heading-cell.php'; ?>
</a>
<?php endif; ?>
<?php if (!empty($item['ekit_cp_table_heading_cell_btn'] == 'yes')) : ?>
<div class="ekit-comparison-table-heading-btn">
<?php if (!empty($item['ekit_cp_table_heading_cell_btn_text'])) : ?>
<a href="<?php echo (!empty($item['ekit_cp_table_heading_cell_url']['url']) ? esc_url($item['ekit_cp_table_heading_cell_url']['url']) : '#') ?>" class="ekit-comparison-table-heading-button">
<?php echo wp_kses($item['ekit_cp_table_heading_cell_btn_text'], \ElementsKit_Lite\Utils::get_kses_array()); ?>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="ekit-comparison-table-body">
<?php foreach($ekit_cp_table_body_content as $index => $item) :
!empty($item['ekit_cp_table_body_cell_url']['url']) && $this->add_link_attributes('ekit_cp_table_body_cell_url'.$item['_id'], $item['ekit_cp_table_body_cell_url']);
if($item['ekit_cp_table_row'] == 'Row') {
if($count == 0) {
echo wp_kses($row_open, \ElementsKit_Lite\Utils::get_kses_array());
} elseif($count > 0) {
echo wp_kses($row_close, \ElementsKit_Lite\Utils::get_kses_array());
echo wp_kses($row_open, \ElementsKit_Lite\Utils::get_kses_array());
}
$count++;
}
?>
<div class="ekit-comparison-table-cell elementor-repeater-item-<?php echo esc_attr($item['_id']); ?> <?php echo esc_attr($item['ekit_cp_table_body_cell_icon_position']); ?>">
<?php if (empty($item['ekit_cp_table_body_cell_url']['url'])): ?>
<li>
<?php require Handler::get_dir() . 'styles/body-cell.php'; ?>
</li>
<?php else: ?>
<a <?php $this->print_render_attribute_string('ekit_cp_table_body_cell_url'.$item['_id']); ?>>
<?php require Handler::get_dir() . 'styles/body-cell.php'; ?>
</a>
<?php endif; ?>
<?php if (!empty($item['ekit_cp_table_cell_btn_text'])) : ?>
<div class="ekit-comparison-table-bcell-btn">
<a href="<?php echo (!empty($item['ekit_cp_table_body_cell_url']['url']) ? esc_url($item['ekit_cp_table_body_cell_url']['url']) : '#') ?>" class="ekit-cp-table-button">
<?php echo wp_kses($item['ekit_cp_table_cell_btn_text'], \ElementsKit_Lite\Utils::get_kses_array()); ?>
</a>
</div>
<?php endif; ?>
</div>
<?php
if($index == count( $ekit_cp_table_body_content ) -1) {
echo wp_kses($row_close, \ElementsKit_Lite\Utils::get_kses_array());
}
endforeach; ?>
</div>
</div>
<div class="ekit-comparison-table-button">
<?php foreach($ekit_cp_table_button_list as $index => $item) :
?>
<a class="ekit-cp-button elementor-repeater-item-<?php echo esc_attr($item['_id']); ?>" href="<?php echo esc_url($item['ekit_cp_table_btn_link']['url']) ?>"><?php echo esc_html($item['ekit_cp_table_btn_title']); ?></a>
<?php
endforeach; ?>
</div>
</div>
<?php if($ekit_cp_table_compare_button_position === 'bottom'): ?>
<div class="compare-button-wrap">
<?php if($ekit_cp_table_compare_button_switch === 'inline'): ?>
<button id="buttonId" class="compare-button"><?php esc_html_e($ekit_cp_table_compare_button_text, 'elementskit'); ?></button>
<?php endif;
if($ekit_cp_table_compare_button_switch === 'tab'): ?>
<div class="ekit-diff-toggle on" id="buttonId">
<span class="ekit-diff-off"><?php esc_html_e($ekit_cp_table_compare_full_button_text, 'elementskit'); ?></span>
<span class="ekit-diff-on"><?php esc_html_e($ekit_cp_table_compare_button_text, 'elementskit'); ?></span>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php
}
}