$55 GRAYBYTE WORDPRESS FILE MANAGER $32

<?php
namespace bopeaElementor\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Typography;
use Elementor\Schemes\Color;
use Elementor\Schemes\Typography;
use Elementor\Utils;
use Elementor\Control_Media;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Repeater;
use Elementor\Icons_Manager;
if ( ! defined( 'ABSPATH' ) ) exit;

class bopea_xsmall_list extends Widget_Base {

  public $base;

    public function get_name() {
        return 'bopea-xsmall-list';
    }

    public function get_title() {
        return esc_html__( 'Mini List Post', 'bopea-function' );
    }

    public function get_icon() { 
        return 'eicon-elementor-circle jl-icons';
    }

    public function get_categories() {
       return [ 'bopea-elements' ];
    }

    protected function register_controls() {

        $this->start_controls_section(
            'section_tab',
            [
                'label' => esc_html__('Post Query And Settings', 'bopea-function'),
            ]
        );
        
        $this->add_control(
          'post_type',
          [
              'label' =>esc_html__('Post types', 'bopea-function'),
              'description' => esc_html__( 'Choose post type to display posts', 'bopea-function' ),
              'type'      => Controls_Manager::SELECT,
              'default'   => 'post',            
               'options'   => $this->post_get_type(),             
          ]
      ); 

      $this->add_control(
        'post_type_tax',
        [
            'label' =>esc_html__('Post taxonomy', 'bopea-function'),
            'description' => esc_html__( 'Choose post type (category or tag)', 'bopea-function' ),
            'type'      => Controls_Manager::SELECT,
            'default'   => 'none',          
             'options'   => $this->post_get_taxs(),
             'condition' => [
               'post_type!'    => ['post']
             ]  
                        
        ]
    ); 

    $this->add_control(
      'term_slugs', [
        'label'       => esc_html__( 'Term Slug', 'bopea-function' ),
        'description' => esc_html__( 'Example: slug1,slug2,slug3', 'bopea-function' ),
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true,
        'condition' => [
          'post_type!'    => ['post']
        ]  
      ]
      );
        
        $this->add_control(
            'categories',
            [
                'label' =>esc_html__('Select Categories', 'bopea-function'),
                'type'      => Controls_Manager::SELECT2,
                 'options'   => $this->post_categories(),
                'label_block' => true,
                'multiple'  => true,
                'condition' => [
                  'post_type'    => ['post']
                ]  
            ]
        ); 
         

        $this->add_control(
      'tags', [
        'label'       => esc_html__( 'Tag Slug', 'bopea-function' ),
        'description' => esc_html__( 'Example: tagslug1,tagslug2,tagslug3', 'bopea-function' ),
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true,
        'condition' => [
          'post_type'    => ['post']
        ]  
      ]
      );  

        $this->add_control(
            'author',
            [
                'label' =>esc_html__('Author Filter', 'bopea-function'),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'none',
                 'options'   => $this->post_author(),
                 'condition' => [
                   'post_type'    => ['post']
                 ]  
            ]
        ); 
        
      //   $this->add_control(
      //     'author',
      //     [
      //         'label' =>esc_html__('Select Author', 'bopea-function'),
      //         'type'      => Controls_Manager::SELECT2,
      //          'options'   => $this->post_author(),
      //         'label_block' => true,
      //         'multiple'  => true,
      //     ]
      // ); 
               

        $this->add_control(
      'posts_per_page',
      array(
        'label'       => esc_html__( 'Posts per Page', 'bopea-function' ),
        'type'        => Controls_Manager::NUMBER,
        'default'     => '6'
      )
    );

        $this->add_control(
      'offset',
      array(
        'label'       => esc_html__( 'Post Offset', 'bopea-function' ),
        'type'        => Controls_Manager::NUMBER,
        'default'     => '',
      )
    );
    

    $this->add_control(
      'format',
      array(
        'label'       => esc_html__( 'Post Format', 'bopea-function' ),
        'type'        => Controls_Manager::SELECT,
        'options'   => [
                        '0'               => esc_html__( 'All', 'bopea-function' ),
                        'gallery'        => esc_html__( 'Gallery', 'bopea-function' ),
                        'video'        => esc_html__( 'Video', 'bopea-function' ),
                        'audio'        => esc_html__( 'Audio', 'bopea-function' ),
                        'quote'        => esc_html__( 'Quote', 'bopea-function' ),
                    ],
        'default'     => '0',
        'condition' => [
          'post_type'    => ['post']
        ]  
      )
    );    

    $this->add_control(
      'post_not_in', [
        'label'       => esc_html__( 'Exclude Post IDs', 'bopea-function' ),
          'description' => esc_html__( 'Example: 1,2,3', 'bopea-function' ),
          'default'     => '',
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true
      ]
      );   

      $this->add_control(
      'post_in', [
        'label'       => esc_html__( 'Post IDs Filter', 'bopea-function' ),
          'description' => esc_html__( 'Example: 1,2,3', 'bopea-function' ),
          'default'     => '',
        'type'        => Controls_Manager::TEXT,
        'label_block'   => true
      ]
      );    

      $this->add_control(
        'ignore_sticky_posts',
        [
            'label' => esc_html__( 'Enable sticky posts', 'bopea-function' ),
            'type' => Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'default' => 'no',
        ]
      );

      $this->add_control(
            'order',
            [
                'label'     =>esc_html__( 'Sort Order', 'bopea-function' ),
                'type'      => Controls_Manager::SELECT,
                'default'   => 'date_post',
                'options'   => [
                  'date_post'      =>esc_html__( 'Latest post', 'bopea-function' ),                        
                  'rand'      =>esc_html__( 'Random', 'bopea-function' ),
                  'update'      =>esc_html__( 'Latest updated', 'bopea-function' ),
                  'comment_count'      =>esc_html__( 'Popular comment', 'bopea-function' ),
                  'author'      =>esc_html__( 'Author', 'bopea-function' ),
                  'popular_most'      =>esc_html__( 'Popular views', 'bopea-function' ),
                  'popular_by_month'      =>esc_html__( 'Popular views by month', 'bopea-function' ),
                  'popular_by_week'      =>esc_html__( 'Popular views by week', 'bopea-function' ),
                  'alphabetical_order_decs'      =>esc_html__( 'Title DECS', 'bopea-function' ),
                  'alphabetical_order_asc'      =>esc_html__( 'Title ACS', 'bopea-function' ),
              ],
            ]
        );       
        
        $this->add_control(
          'tabs_link',
          array(
            'label'       => esc_html__( 'Tab Link', 'bopea-function' ),
            'type'        => Controls_Manager::SELECT,
            'default'   => 'none',
            'options'   => [
                            'none'     => esc_html__( 'None', 'bopea-function' ),
                            'category' => esc_html__( 'Categories', 'bopea-function' ),
                            'tag'      => esc_html__( 'Tags', 'bopea-function' ),                        
            ],
            'condition' => [
              'post_type'    => ['post']
            ]  
          )
        );
        $this->add_control(
          'tabs_link_ids',
          array(
            'label'       => esc_html__( 'Filter ID', 'bopea-function' ),
            'type'        => Controls_Manager::TEXT,
            'description' => esc_html__( 'Add ID of category or tag (Example: 1,2,3)', 'bopea-function' ),
            'default'     => '',
            'condition' => [
              'post_type'    => ['post']
            ]  
          )
        );
        $this->add_control(
          'tabs_link_label',
          array(
            'label'       => esc_html__( 'Tab Label', 'bopea-function' ),
            'type'        => Controls_Manager::TEXT,
            'default'     => esc_html__( 'All', 'bopea-function' ),
            'condition' => [
              'post_type'    => ['post']
            ]  
          )
        );      

      $this->add_control(
      'pagination',
      array(
        'label'       => esc_html__( 'Pagination', 'bopea-function' ),
        'type'        => Controls_Manager::SELECT,
        'options'   => [
                        '0'               => esc_html__( 'None', 'bopea-function' ),
                        'next_prev'       => esc_html__( 'Arrow', 'bopea-function' ),
                        'loadmore'        => esc_html__( 'Load More', 'bopea-function' ),
                        'autoload'        => esc_html__( 'Auto Load', 'bopea-function' ),
                    ],
        'default'     => '0',
      )
    );    

      $this->end_controls_section();      
      //Title Style Section
    $this->start_controls_section(
      'section_tab_style', [
        'label'  => esc_html__( 'Post Custom Style', 'bopea-function' ),
        'tab'     => Controls_Manager::TAB_STYLE,
      ]
        );     

        $this->add_control(
          'jl_cus_img',
          [
              'label'     =>esc_html__( 'Image size', 'bopea-function' ),
              'type'      => Controls_Manager::SELECT,
              'default'   => '',
              'options'   => [
                      ''      =>esc_html__( 'Default image size', 'bopea-function' ),      
                      'bopea_large'      =>esc_html__( '1600 x 0', 'bopea-function' ),
                      'bopea_medium'      =>esc_html__( '1100 x 0', 'bopea-function' ),
                      'bopea_small'      =>esc_html__( '150 x 150', 'bopea-function' ),
                      'bopea_layouts'      =>esc_html__( '680 x 0', 'bopea-function' ),
                      'medium'      =>esc_html__( 'Medium', 'bopea-function' ),
                  ],
          ]
      ); 

      $this->add_control(
        'main_tag',
        [
            'label' => __( 'Title Tag', 'bopea-function' ),
            'type' => Controls_Manager::SELECT,
            'options' => [
                'h1' => 'H1',
                'h2' => 'H2',
                'h3' => 'H3',
                'h4' => 'H4',
                'h5' => 'H5',
                'h6' => 'H6',                
                'div' => 'div',                
            ],
            'default' => 'h2',
        ]
      );
 
      $this->add_responsive_control(
        'jl_item_cols',
        [
            'label' => __( 'Number of columns', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,                        
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 12,
                    'step' => 1,
                ]
            ],
            'selectors' => [            
            '{{WRAPPER}} .jl_xsgrid .jl_fli_wrap' => 'grid-template-columns: repeat({{SIZE}},minmax(0,1fr)) !important;',            
            ],
        ]
      );

        $this->add_responsive_control(
        'jl_item_cols_space',
        [
            'label' => __( 'Columns space', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,                        
            'default' => [
              'size' => 30,
              ],
              'tablet_default' => [
                'size' => 20,
              ],
              'mobile_default' => [
                'size' => 20,
              ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 500,
                    'step' => 1,
                ]
            ],
            'selectors' => [            
            '{{WRAPPER}} .jl_xsgrid .jl_fli_wrap' => '--jlcols-gap: {{SIZE}}{{UNIT}};',            
            ],
        ]
      );

        $this->add_responsive_control(
        'jl_item_row_space',
        [
            'label' => __( 'Row space', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,                        
            'default' => [
              'size' => 30,
              ],
              'tablet_default' => [
                'size' => 20,
              ],
              'mobile_default' => [
                'size' => 20,
              ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 500,
                    'step' => 1,
                ]
            ],
            'selectors' => [            
            '{{WRAPPER}} .jl_xsgrid .jl_fli_wrap' => '--jlrow-gap: {{SIZE}}{{UNIT}};',            
            ],
        ]
      );

      $this->add_responsive_control(
        'slfont_size',
        [
            'label' => __( 'Title font size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 500,
                    'step' => 1,
                ]
            ],
            'selectors' => [            
            '{{WRAPPER}} .jl_mmlist_layout .jl_fe_title' => 'font-size: {{SIZE}}{{UNIT}} !important;',            
            ],
        ]
      );

      $this->add_responsive_control(
        'g_sm_img',
        [
            'label' => __( 'Small img border radius', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
            '{{WRAPPER}} .jl_mmlist_layout .jl_imgw.jl_radus_e' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]
    ); 

    $this->add_responsive_control(
      'g_sm_img_w',
      [
          'label' => __( 'Small img width', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => 0,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .jl_mmlist_layout' => '--jl-sm-w: {{SIZE}}{{UNIT}};',
          ],
      ]
  );

  $this->add_responsive_control(
    'g_sm_img_h',
    [
        'label' => __( 'Small img height', 'bopea-function' ),
        'type' => Controls_Manager::SLIDER,            
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 500,
                'step' => 1,
            ]
        ],
        'selectors' => [
        '{{WRAPPER}} .jl_mmlist_layout' => '--jl-sm-h: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
  'jl_num_text_line',
  [
      'label' => __( 'Number line of text', 'bopea-function' ),
      'type' => Controls_Manager::SLIDER,            
      'range' => [
          'px' => [
              'min' => 1,
              'max' => 10,
              'step' => 1,
          ]
      ],
      'selectors' => [
      '{{WRAPPER}}' => '--jl-num-line: {{SIZE}};',            
      ],
  ]
);

$this->add_control(
  'jl_en_smframe',
  [
      'label' => esc_html__( 'Enable frame box', 'bopea-function' ),
      'type' => Controls_Manager::SWITCHER,
      'selectors' => array(
        '{{WRAPPER}} .jl_mmlist_layout' => 'border: 1px solid var(--jl-post-line-color); padding: var(--jl-fr-padding, 15px); border-radius: var(--jl-border-rounded); background: var(--jlfr-bg);'        
    )
  ]
); 

$this->add_responsive_control(
  'jl_fr_padd',
  [
      'label' => __( 'Frame padding', 'bopea-function' ),
      'type' => Controls_Manager::SLIDER,                        
      'range' => [
          'px' => [
              'min' => 1,
              'max' => 500,
              'step' => 1,
          ]
      ],
      'selectors' => [            
      '{{WRAPPER}}' => '--jl-fr-padding: {{SIZE}}{{UNIT}};',            
      ],
      'condition' => [
        'jl_en_smframe!'    => ['']
      ]
  ]
  );    

  $this->add_control(
    'frline_color',
    [
      'label' => __( 'Frame line color', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}}' => '--jl-post-line-color: {{VALUE}}'        
      ],
      'condition' => [
        'jl_en_smframe!'    => ['']
      ]
    ]
  );

  $this->add_control(
    'frline_color_dark',
    [
      'label' => __( 'Frame line color dark mode', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '.options_dark_skin {{WRAPPER}}' => '--jl-post-line-color: {{VALUE}}'        
      ],
      'condition' => [
        'jl_en_smframe!'    => ['']
      ]
    ]
  );

  $this->add_control(
    'frline_bg',
    [
      'label' => __( 'Frame background color', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}}' => '--jlfr-bg: {{VALUE}}'        
      ],
      'default' => '#fff',
      'condition' => [
        'jl_en_smframe!'    => ['']
      ]
    ]
  );

  $this->add_control(
    'frline_bg_dark',
    [
      'label' => __( 'Frame background color dark mode', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '.options_dark_skin {{WRAPPER}}' => '--jlfr-bg: {{VALUE}}'        
      ],
      'default' => '#323232',
      'condition' => [
        'jl_en_smframe!'    => ['']
      ]
    ]
  );

$this->add_control(
          'jl_en_share',
          [
              'label' => esc_html__( 'Enable share', 'bopea-function' ),
              'type' => Controls_Manager::SWITCHER,
              'selectors' => array(
                '{{WRAPPER}} .jl_fot_share_i.jl_share_l_bg.jls_tooltip' => 'display: inline-flex !important;',
            )
          ]
        ); 

        $this->add_control(
          'jl_en_sh_l',
          [
              'label' => esc_html__( 'Enable share inline', 'bopea-function' ),
              'type' => Controls_Manager::SWITCHER,
              'return_value' => 'yes',
              'selectors' => [
                '{{WRAPPER}} .block-section' => '--jl-sh-lp: 15px;',
              ],
              'condition' => [
                'jl_en_share!'    => ['']
              ]
          ]
        );
      
        $this->add_control(
          'jl_hide_cat',
          [
              'label' => esc_html__( 'Hide category', 'bopea-function' ),
              'type' => Controls_Manager::SWITCHER,
              'return_value' => 'yes',
              'default' => 'no',
          ]
      );   
          $this->add_control(
                'jl_hide_meta',
                [
                    'label' => esc_html__( 'Hide date', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'return_value' => 'yes',
                    'default' => 'no',
                ]
            );             

            $this->add_control(
                'jl_right_img',
                [
                    'label' => esc_html__( 'Enable list right image', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'selectors' => [
                    '{{WRAPPER}} .jl_li_in' => 'flex-direction: row-reverse'        
            ]
                ]
            );

          $this->add_control(
                'jl_hide_line',
                [
                    'label' => esc_html__( 'Hide row line', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'return_value' => 'yes',
                    'default' => 'no',
                ]
        );
        $this->add_control(
                'jl_hide_col_line',
                [
                    'label' => esc_html__( 'Hide columns line', 'bopea-function' ),
                    'type' => Controls_Manager::SWITCHER,
                    'return_value' => 'yes',
                    'default' => 'yes',
                ]
        ); 
        
        $this->add_control(
          'title_color',
          [
            'label' => __( 'Title color', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .block-section' => '--jl-txt-color: {{VALUE}}; --jl-main-color: {{VALUE}};'        
            ]            
          ]
        );

          $this->add_control(
          'title_color_dark',
          [
            'label' => __( 'Title color dark mode', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-txt-color: {{VALUE}}; --jl-main-color: {{VALUE}};'        
            ]            
          ]
        );         

        $this->add_control(
          'meta_color',
          [
            'label' => __( 'Meta color', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .block-section' => '--jl-meta-color: {{VALUE}}'        
            ]            
          ]
        );

          $this->add_control(
          'meta_color_dark',
          [
            'label' => __( 'Meta color dark mode', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-meta-color: {{VALUE}}'        
            ]            
          ]
        ); 

        $this->add_control(
          'liline_color',
          [
            'label' => __( 'Line color', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .block-section' => '--jl-post-line-color: {{VALUE}}'        
            ]
          ]
        );

          $this->add_control(
          'liline_color_dark',
          [
            'label' => __( 'Line color dark mode', 'bopea-function' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-post-line-color: {{VALUE}}'        
            ]
          ]
        );


        $this->add_control(
          'jl_show_num',
          [
              'label' => esc_html__( 'Show number counter', 'bopea-function' ),
              'type' => Controls_Manager::SWITCHER,
              'return_value' => 'yes',
              'default' => 'no',
          ]
      );     
      
      $this->add_control(
        'jl_num_pos',
        array(
          'label'       => esc_html__( 'Number positions', 'bopea-function' ),
          'type'        => Controls_Manager::SELECT,
          'options'   => [
                          'jl_num_top'               => esc_html__( 'Top', 'bopea-function' ),
                          'jl_num_mid'        => esc_html__( 'Middle', 'bopea-function' ),
                          'jl_num_bottom'        => esc_html__( 'Bottom', 'bopea-function' )                                
                          
                      ],
          'default'     => 'jl_num_top',
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
        )
      );    

    $this->add_control(
      'jl_num_bg',
      [
        'label' => __( 'Number background color', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .block-section' => '--jl-num-bg: {{VALUE}}'        
        ],
        'condition' => [
          'jl_show_num'    => 'yes'
        ]
      ]
    );

    $this->add_control(
      'jl_num_bg_dark',
      [
        'label' => __( 'Number background color dark mode', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-num-bg: {{VALUE}}'        
        ],
        'condition' => [
          'jl_show_num'    => 'yes'
        ]
      ]
    );

    $this->add_control(
      'jl_num_color',
      [
        'label' => __( 'Number color', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .block-section' => '--jl-num-color: {{VALUE}}'        
        ],
        'condition' => [
          'jl_show_num'    => 'yes'
        ]
      ]
    );

    $this->add_control(
      'jl_num_color_dark',
      [
        'label' => __( 'Number color dark mode', 'bopea-function' ),
        'type' => Controls_Manager::COLOR,
        'selectors' => [
            '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-num-color: {{VALUE}}'        
        ],
        'condition' => [
          'jl_show_num'    => 'yes'
        ]
      ]
    );

    $this->add_responsive_control(
      'jl_num_fsize',
      [
          'label' => __( 'Number font size', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => 0,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .block-section' => '--jlnum-fsize: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
      ]
    );

    $this->add_group_control(
      Group_Control_Typography::get_type(),
      [
          'name' => 'num_typo', 
          'label' =>esc_html__( 'Number typography', 'bopea-function' ),               
          'selector' => '{{WRAPPER}} .jl_sh_num .jl_nun_d',            
      ]
    );

    $this->add_responsive_control(
      'jl_num_size',
      [
          'label' => __( 'Number size', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => 0,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .block-section' => '--jlnum-size: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
      ]
    );

    $this->add_responsive_control(
      'jl_num_space',
      [
          'label' => __( 'Number space', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => 0,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .block-section' => '--jlnum-space: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
      ]
    );

    $this->add_responsive_control(
      'jl_tb_space',
      [
          'label' => __( 'Top/Bottom space', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => -100,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .block-section' => '--jl-tb-space: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
      ]
    );          

    $this->add_responsive_control(
      'jl_num_align',
      [
          'label'     => __( 'Number alignment', 'bopea-function' ),
          'type'      => Controls_Manager::CHOOSE,
          'options'   => [
              'flex-start'   => [
                  'title' => __( 'Left', 'bopea-function' ),
                  'icon'  => 'eicon-text-align-left',
                ],
              'center' => [
                  'title' => __( 'Center', 'bopea-function' ),
                  'icon'  => 'eicon-text-align-center',
                ],
              'flex-end'  => [
                  'title' => __( 'Right', 'bopea-function' ),
                  'icon'  => 'eicon-text-align-right',
                ],
            ],
          'toggle'    => false,
          'selectors' => [
              '{{WRAPPER}} .block-section' => '--jlnum-align: {{VALUE}};',
          ],
          'condition' => [
            'jl_show_num'    => 'yes'
          ]
      ]
  );
                
        $this->end_controls_section();      

        $this->start_controls_section(
          'section_tab_filter', [
            'label'  => esc_html__( 'Tab Filter Style', 'bopea-function' ),
            'tab'     => Controls_Manager::TAB_STYLE,
          ]
        );

        $this->add_responsive_control(
          'jlc_tab_align',
          array(
              'label'     => __( 'Tab alignment', 'bopea-function' ),
              'type'      => Controls_Manager::CHOOSE,
              'options'   => array(
                  'flex-start'   => array(
                      'title' => __( 'Left', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-left',
                  ),
                  'center' => array(
                      'title' => __( 'Center', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-center',
                  ),
                  'flex-end'  => array(
                      'title' => __( 'Right', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-right',
                  ),
              ),
              'toggle'    => false,
              'selectors' => array(
                  '{{WRAPPER}} .jl_ajax_c' => 'justify-content: {{VALUE}};',
              )
          )
      );

        $this->add_responsive_control(
        'tab_filter_size',
        [
            'label' => __( 'Tab filter font size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
            '{{WRAPPER}} .jl_ajax_c' => 'font-size: {{SIZE}}{{UNIT}};',
            ],
        ]
    );    

    $this->add_responsive_control(
      'tab_filter_space',
      [
          'label' => __( 'Tab filter space', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'range' => [
              'px' => [
                  'min' => 0,
                  'max' => 200,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .jl_ajax_c' => 'gap: {{SIZE}}{{UNIT}};',
          ],
      ]
  );   
  
  $this->add_control(
    'tab_link_color',
    [
      'label' => __( 'Tab link color', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .jl_ajax_c .ajax_nav_item a' => 'color: {{VALUE}} !important'        
      ]
    ]
  );

    $this->add_control(
    'tab_link_color_dark',
    [
      'label' => __( 'Tab link color dark mode', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '.options_dark_skin {{WRAPPER}} .jl_ajax_c .ajax_nav_item a' => 'color: {{VALUE}} !important'        
      ]
    ]
  );    

  $this->add_control(
    'tab_link_h_color',
    [
      'label' => __( 'Tab link hover color', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .jl_ajax_c .ajax_nav_item a:hover' => 'color: {{VALUE}} !important'        
      ]
    ]
  );

    $this->add_control(
    'tab_link_h_color_dark',
    [
      'label' => __( 'Tab link hover color dark mode', 'bopea-function' ),
      'type' => Controls_Manager::COLOR,
      'selectors' => [
          '.options_dark_skin {{WRAPPER}} .jl_ajax_c .ajax_nav_item a:hover' => 'color: {{VALUE}} !important'        
      ]
    ]
  );  
    
    $this->add_control(
      'tab_top_right',
      [
          'label' => esc_html__( 'Tab filter absolute position', 'bopea-function' ),
          'type' => Controls_Manager::SWITCHER,
          'selectors' => [
            '{{WRAPPER}} .jl_ajax_w' => 'position: absolute; z-index: 9;',
          ], 
      ]
    );

    $this->add_responsive_control(
      'tab_filter_top',
      [
          'label' => __( 'Top position', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'default' => [
            'size' => -60,
            ],
          'range' => [
              'px' => [
                  'min' => -500,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .jl_ajax_w' => 'top: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'tab_top_right'    => 'yes'
          ]
      ]
  );

  $this->add_responsive_control(
    'tab_filter_left',
    [
        'label' => __( 'Left position', 'bopea-function' ),
        'type' => Controls_Manager::SLIDER,                    
        'range' => [
            'px' => [
                'min' => -500,
                'max' => 500,
                'step' => 1,
            ]
        ],
        'selectors' => [
        '{{WRAPPER}} .jl_ajax_w' => 'left: {{SIZE}}{{UNIT}};',
        ],
        'condition' => [
          'tab_top_right'    => 'yes'
        ]
    ]
);

  $this->add_responsive_control(
      'tab_filter_right',
      [
          'label' => __( 'Right position', 'bopea-function' ),
          'type' => Controls_Manager::SLIDER,            
          'default' => [
            'size' => 0,
            ],
          'range' => [
              'px' => [
                  'min' => -500,
                  'max' => 500,
                  'step' => 1,
              ]
          ],
          'selectors' => [
          '{{WRAPPER}} .jl_ajax_w' => 'right: {{SIZE}}{{UNIT}};',
          ],
          'condition' => [
            'tab_top_right'    => 'yes'
          ]
      ]
  );
         
        $this->end_controls_section();        

        $this->start_controls_section(
          'section_pagi_style', [
            'label'  => esc_html__( 'Pagination Style', 'bopea-function' ),
            'tab'     => Controls_Manager::TAB_STYLE,
          ]
        );

        $this->add_responsive_control(
          'jlc_align',
          array(
              'label'     => __( 'Pagination alignment', 'bopea-function' ),
              'type'      => Controls_Manager::CHOOSE,
              'options'   => array(
                  'left'   => array(
                      'title' => __( 'Left', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-left',
                  ),
                  'center' => array(
                      'title' => __( 'Center', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-center',
                  ),
                  'flex-end'  => array(
                      'title' => __( 'Right', 'bopea-function' ),
                      'icon'  => 'eicon-text-align-right',
                  ),
              ),
              'toggle'    => false,
              'selectors' => array(
                  '{{WRAPPER}} .jl_el_nav_w' => 'justify-content: {{VALUE}};',
              )
          )
      );

        $this->add_responsive_control(
          'g_pagination',
          [
              'label' => __( 'Pagination spacing', 'bopea-function' ),
              'type' => Controls_Manager::SLIDER,            
              'range' => [
                  'px' => [
                      'min' => -150,
                      'max' => 400,
                      'step' => 1,
                  ]
              ],
              'selectors' => [
              '{{WRAPPER}} .jl_el_nav_w' => 'margin-top: {{SIZE}}{{UNIT}};',            
              ],
          ]
      ); 
  
      $this->add_responsive_control(
          'g_pagination_radius',
          [
              'label' => __( 'Pagination border radius', 'bopea-function' ),
              'type' => Controls_Manager::SLIDER,            
              'range' => [
                  'px' => [
                      'min' => 0,
                      'max' => 200,
                      'step' => 1,
                  ]
              ],
              'selectors' => [
              '{{WRAPPER}} .block-section' => '--jl-fnav-radius: {{SIZE}}{{UNIT}};',
              ],
          ]
      );  
      
      $this->add_responsive_control(
        'jl_nav_more',
        [
            'label' =>esc_html__( 'Load more padding', 'victro-function' ),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%'],
            'default' => [
                'top' => '',
                'right' => '',
                'bottom' => '' ,
                'left' => '',
            ],
            'selectors' => [
                '{{WRAPPER}} .block-section' =>  '--jl-fnav-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'condition' => [
              'pagination'    => ['loadmore']
            ]
        ]
    );

      $this->add_responsive_control(
        'jl_nav_size',
        [
            'label' => __( 'Arrow nav size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
            '{{WRAPPER}} .block-section' => '--jl-nav-size: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
              'pagination'    => ['next_prev']
            ]
        ]
      );

      $this->add_responsive_control(
        'jl_nav_fsize',
        [
            'label' => __( 'Font size', 'bopea-function' ),
            'type' => Controls_Manager::SLIDER,            
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                    'step' => 1,
                ]
            ],
            'selectors' => [
            '{{WRAPPER}} .block-section' => '--jl-nav-fsize: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
              'pagination'    => ['next_prev','loadmore']
            ]
        ]
      );  

      $this->start_controls_tabs( 'jl_fnav_tab_w' );
      $this->start_controls_tab( 'jl_fnav_tab', [ 'label' => esc_html__( 'Normal', 'bopea-function' ) ] );
        $this->add_control(
            'jl_nav_bg',
            [
              'label' => __( 'Background color', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '{{WRAPPER}} .block-section' => '--jl-nav-bg: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_bg_dark',
            [
              'label' => __( 'Background color dark mode', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-nav-bg: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_color',
            [
              'label' => __( 'Color', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '{{WRAPPER}} .block-section' => '--jl-nav-color: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_color_dark',
            [
              'label' => __( 'Color dark mode', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-nav-color: {{VALUE}}'        
              ]
            ]
          );
        $this->end_controls_tab();

        $this->start_controls_tab( 'jl_fnav_tab_hover', [ 'label' => esc_html__( 'Hover', 'bopea-function' ) ] );  
          $this->add_control(
            'jl_nav_bg_h',
            [
              'label' => __( 'Background color', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '{{WRAPPER}} .block-section' => '--jl-nav-bg-h: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_bg_dark_h',
            [
              'label' => __( 'Background color dark mode', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-nav-bg-h: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_color_h',
            [
              'label' => __( 'Color', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '{{WRAPPER}} .block-section' => '--jl-nav-color-h: {{VALUE}}'        
              ]
            ]
          );

          $this->add_control(
            'jl_nav_color_dark_h',
            [
              'label' => __( 'Color dark mode', 'bopea-function' ),
              'type' => Controls_Manager::COLOR,
              'selectors' => [
                  '.options_dark_skin {{WRAPPER}} .block-section' => '--jl-nav-color-h: {{VALUE}}'        
              ]
            ]
          );
        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

    }

    protected function render( ) { 
        $settings = $this->get_settings();

      if ( function_exists( 'bopea_xsg' ) ) {
      $settings['blockid'] = 'blockid_' . $this->get_id();      
      if(!empty($settings['categories'])){
      $settings['categories'] = implode(',', $settings['categories']);      
      }
      echo \bopea_xsg( $settings );
      }
    }

    public function post_categories() {

      $terms = get_terms( array(
            'taxonomy'    => 'category',
            'hide_empty'  => false,
            'posts_per_page' => -1, 
            'suppress_filters' => false,
      ) );

      $cat_list = [];
      foreach($terms as $post) {
      $cat_list[$post->term_id]  = [$post->name];
      }
      return $cat_list;
   }

   public function post_author() {

    $blogusers = get_users( array(
    'role__not_in' => array( 'subscriber' ),
    'fields'       => array( 'ID', 'display_name' )
    ) );

      $user_list = [];
      $user_list['none']= esc_html__( 'None', 'bopea-function' );
      foreach($blogusers as $user) {
      $user_list[$user->ID]  = [$user->display_name];
      }
      return $user_list;
   }
   public function post_get_type() {

    $post_types = get_post_types( '', 'names' ); 

      $type_list = [];
      $type_list['none']= esc_html__( 'None', 'bopea-function' );
      if ( ! empty( $post_types ) ){
        foreach($post_types as $p_type) {
        $type_list[$p_type]  = [$p_type];
        }
      }
      return $type_list;
   }

   public function post_get_taxs() {

    $taxonomies = get_taxonomies();

      $type_taxs = [];
      $type_taxs['none']= esc_html__( 'None', 'bopea-function' );
      if ( ! empty( $taxonomies ) ){
        foreach($taxonomies as $p_taxs) {
        $type_taxs[$p_taxs]  = [$p_taxs];
        }
    }
      return $type_taxs;
   }
   
}