trAvis - MANAGER

Edit File: flex-item.php

<?php
namespace Elementor;

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() {
		return 'flex-item';
	}

protected function init_fields() {
		$fields = [];

$fields['basis_type'] = [
			'label' => esc_html_x( 'Flex Basis', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::SELECT,
			'options' => [
				'' => esc_html_x( 'Default', 'Flex Item Control', 'elementor' ),
				'custom' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
			],
			'responsive' => true,
		];

$fields['basis'] = [
			'label' => esc_html_x( 'Custom Width', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::SLIDER,
			'range' => [
				'px' => [
					'min' => 0,
					'max' => 1000,
				],
				'%' => [
					'min' => 0,
					'max' => 100,
				],
				'vw' => [
					'min' => 0,
					'max' => 100,
				],
			],
			'default' => [
				'unit' => '%',
			],
			'size_units' => [ 'px', '%', 'vw' ],
			'selectors' => [
				'{{SELECTOR}}' => '--flex-basis: {{SIZE}}{{UNIT}};',
			],
			'condition' => [
				'basis_type' => 'custom',
			],
			'responsive' => true,
		];

$fields['align_self'] = [
			'label' => esc_html_x( 'Align Self', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::CHOOSE,
			'options' => [
				'flex-start' => [
					'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-align-start-v',
				],
				'center' => [
					'title' => esc_html_x( 'Center', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-align-center-v',
				],
				'flex-end' => [
					'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-align-end-v',
				],
				'stretch' => [
					'title' => esc_html_x( 'Stretch', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-align-stretch-v',
				],
			],
			'default' => '',
			'selectors' => [
				'{{SELECTOR}}' => '--align-self: {{VALUE}};',
			],
			'responsive' => true,
			'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
		];

$fields['order'] = [
			'label' => esc_html_x( 'Order', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::CHOOSE,
			'default' => '',
			'options' => [
				'start' => [
					'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-order-start',
				],
				'end' => [
					'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-flex eicon-order-end',
				],
				'custom' => [
					'title' => esc_html_x( 'Custom', 'Flex Item Control', '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 */',
				'custom' => '',
			],
			'selectors' => [
				'{{SELECTOR}}' => '--order: {{VALUE}};',
			],
			'responsive' => true,
			'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
		];

$fields['order_custom'] = [
			'label' => esc_html_x( 'Custom Order', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::NUMBER,
			'selectors' => [
				'{{SELECTOR}}' => '--order: {{VALUE}};',
			],
			'responsive' => true,
			'condition' => [
				'order' => 'custom',
			],
		];

$fields['size'] = [
			'label' => esc_html_x( 'Size', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::CHOOSE,
			'default' => '',
			'options' => [
				'none' => [
					'title' => esc_html_x( 'None', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-ban',
				],
				'grow' => [
					'title' => esc_html_x( 'Grow', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-grow',
				],
				'shrink' => [
					'title' => esc_html_x( 'Shrink', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-shrink',
				],
				'custom' => [
					'title' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
					'icon' => 'eicon-ellipsis-v',
				],
			],
			'selectors_dictionary' => [
				'grow' => '--flex-grow: 1; --flex-shrink: 0;',
				'shrink' => '--flex-grow: 0; --flex-shrink: 1;',
				'custom' => '',
				'none' => '--flex-grow: 0; --flex-shrink: 0;',
			],
			'selectors' => [
				'{{SELECTOR}}' => '{{VALUE}};',
			],
			'responsive' => true,
		];

$fields['grow'] = [
			'label' => esc_html_x( 'Flex Grow', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::NUMBER,
			'selectors' => [
				'{{SELECTOR}}' => '--flex-grow: {{VALUE}};',
			],
			'default' => 1,
			'placeholder' => 1,
			'responsive' => true,
			'condition' => [
				'size' => 'custom',
			],
		];

$fields['shrink'] = [
			'label' => esc_html_x( 'Flex Shrink', 'Flex Item Control', 'elementor' ),
			'type' => Controls_Manager::NUMBER,
			'selectors' => [
				'{{SELECTOR}}' => '--flex-shrink: {{VALUE}};',
			],
			'default' => 1,
			'placeholder' => 1,
			'responsive' => true,
			'condition' => [
				'size' => 'custom',
			],
		];

return $fields;
	}

protected function get_default_options() {
		return [
			'popover' => false,
		];
	}
}