if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
class Group_Control_Flex_Item extends Group_Control_Base {
protected static $fields;
public static function get_type() {
protected function init_fields() {
$fields['basis_type'] = [
'label' => esc_html__( 'Flex Basis', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'custom' => esc_html__( 'Custom', 'elementor' ),
'label' => esc_html__( 'Custom Width', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'{{SELECTOR}}' => '--flex-basis: {{SIZE}}{{UNIT}};',
'basis_type' => 'custom',
$fields['align_self'] = [
'label' => esc_html__( 'Align Self', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'title' => esc_html__( 'Start', 'elementor' ),
'icon' => 'eicon-flex eicon-align-start-v',
'title' => esc_html__( 'Center', 'elementor' ),
'icon' => 'eicon-flex eicon-align-center-v',
'title' => esc_html__( 'End', 'elementor' ),
'icon' => 'eicon-flex eicon-align-end-v',
'title' => esc_html__( 'Stretch', 'elementor' ),
'icon' => 'eicon-flex eicon-align-stretch-v',
'{{SELECTOR}}' => '--align-self: {{VALUE}};',
'description' => esc_html__( 'This control will affect contained elements only.', 'elementor' ),
'label' => esc_html__( 'Order', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'title' => esc_html__( 'Start', 'elementor' ),
'icon' => 'eicon-flex eicon-order-start',
'title' => esc_html__( 'End', 'elementor' ),
'icon' => 'eicon-flex eicon-order-end',
'title' => esc_html__( 'Custom', 'elementor' ),
'icon' => 'eicon-ellipsis-v',
'selectors_dictionary' => [
// Hacks to set the order to start / end.
// For example, if the user has 10 widgets, but wants to set the 5th one to be first,
// this hack should do the trick while taking in account elements with `order: 0` or less.
'start' => '-99999 /* order start hack */',
'end' => '99999 /* order end hack */',
'{{SELECTOR}}' => '--order: {{VALUE}};',
'description' => esc_html__( 'This control will affect contained elements only.', 'elementor' ),
$fields['order_custom'] = [
'label' => esc_html__( 'Custom Order', 'elementor' ),
'type' => Controls_Manager::NUMBER,
'{{SELECTOR}}' => '--order: {{VALUE}};',
'label' => esc_html__( 'Size', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'title' => esc_html__( 'None', 'elementor' ),
'title' => esc_html__( 'Grow', 'elementor' ),
'title' => esc_html__( 'Shrink', 'elementor' ),
'icon' => 'eicon-shrink',
'title' => esc_html__( 'Custom', 'elementor' ),
'icon' => 'eicon-ellipsis-v',
'selectors_dictionary' => [
'grow' => '--flex-grow: 1; --flex-shrink: 0;',
'shrink' => '--flex-grow: 0; --flex-shrink: 1;',
'none' => '--flex-grow: 0; --flex-shrink: 0;',
'{{SELECTOR}}' => '{{VALUE}};',
'label' => esc_html__( 'Flex Grow', 'elementor' ),
'type' => Controls_Manager::NUMBER,
'{{SELECTOR}}' => '--flex-grow: {{VALUE}};',
'label' => esc_html__( 'Flex Shrink', 'elementor' ),
'type' => Controls_Manager::NUMBER,
'{{SELECTOR}}' => '--flex-shrink: {{VALUE}};',
protected function get_default_options() {