<?php

[0] Fix | Delete

namespace Elementor;

[1] Fix | Delete

[2] Fix | Delete

if ( ! defined( 'ABSPATH' ) ) {

[3] Fix | Delete

exit; // Exit if accessed directly.

[4] Fix | Delete

}

[5] Fix | Delete

[6] Fix | Delete

class Group_Control_Flex_Container extends Group_Control_Base {

[7] Fix | Delete

[8] Fix | Delete

protected static $fields;

[9] Fix | Delete

[10] Fix | Delete

public static function get_type() {

[11] Fix | Delete

return 'flex-container';

[12] Fix | Delete

}

[13] Fix | Delete

[14] Fix | Delete

protected function init_fields() {

[15] Fix | Delete

$start = is_rtl() ? 'right' : 'left';

[16] Fix | Delete

$end = is_rtl() ? 'left' : 'right';

[17] Fix | Delete

[18] Fix | Delete

$fields = [];

[19] Fix | Delete

[20] Fix | Delete

$fields['items'] = [

[21] Fix | Delete

'type' => Controls_Manager::HEADING,

[22] Fix | Delete

'label' => esc_html__( 'Items', 'elementor' ),

[23] Fix | Delete

'separator' => 'before',

[24] Fix | Delete

];

[25] Fix | Delete

[26] Fix | Delete

$fields['direction'] = [

[27] Fix | Delete

'label' => esc_html__( 'Direction', 'elementor' ),

[28] Fix | Delete

'type' => Controls_Manager::CHOOSE,

[29] Fix | Delete

'options' => [

[30] Fix | Delete

'row' => [

[31] Fix | Delete

'title' => esc_html__( 'Row - horizontal', 'elementor' ),

[32] Fix | Delete

'icon' => 'eicon-arrow-' . $end,

[33] Fix | Delete

],

[34] Fix | Delete

'column' => [

[35] Fix | Delete

'title' => esc_html__( 'Column - vertical', 'elementor' ),

[36] Fix | Delete

'icon' => 'eicon-arrow-down',

[37] Fix | Delete

],

[38] Fix | Delete

'row-reverse' => [

[39] Fix | Delete

'title' => esc_html__( 'Row - reversed', 'elementor' ),

[40] Fix | Delete

'icon' => 'eicon-arrow-' . $start,

[41] Fix | Delete

],

[42] Fix | Delete

'column-reverse' => [

[43] Fix | Delete

'title' => esc_html__( 'Column - reversed', 'elementor' ),

[44] Fix | Delete

'icon' => 'eicon-arrow-up',

[45] Fix | Delete

],

[46] Fix | Delete

],

[47] Fix | Delete

'default' => '',

[48] Fix | Delete

// The `--container-widget-width` CSS variable is used for handling widgets that get an undefined width in column mode.

[49] Fix | Delete

// The `--container-widget-flex-grow` CSS variable is used to give certain widgets a default `flex-grow: 1` value for the `flex row` combination.

[50] Fix | Delete

'selectors_dictionary' => [

[51] Fix | Delete

'row' => '--flex-direction: row; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap;',

[52] Fix | Delete

'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',

[53] Fix | Delete

'row-reverse' => '--flex-direction: row-reverse; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap-reverse;',

[54] Fix | Delete

'column-reverse' => '--flex-direction: column-reverse; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',

[55] Fix | Delete

],

[56] Fix | Delete

'selectors' => [

[57] Fix | Delete

'{{SELECTOR}}' => '{{VALUE}};',

[58] Fix | Delete

],

[59] Fix | Delete

'responsive' => true,

[60] Fix | Delete

];

[61] Fix | Delete

[62] Fix | Delete

// Only use the flex direction prefix class inside the editor.

[63] Fix | Delete

$flex_direction_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : [];

[64] Fix | Delete

[65] Fix | Delete

$fields['_is_row'] = array_merge( $flex_direction_prefix_class, [

[66] Fix | Delete

'type' => Controls_Manager::HIDDEN,

[67] Fix | Delete

'default' => 'row',

[68] Fix | Delete

'condition' => [

[69] Fix | Delete

'direction' => [

[70] Fix | Delete

'row',

[71] Fix | Delete

'row-reverse',

[72] Fix | Delete

],

[73] Fix | Delete

],

[74] Fix | Delete

] );

[75] Fix | Delete

[76] Fix | Delete

$fields['_is_column'] = array_merge( $flex_direction_prefix_class, [

[77] Fix | Delete

'type' => Controls_Manager::HIDDEN,

[78] Fix | Delete

'default' => 'column',

[79] Fix | Delete

'condition' => [

[80] Fix | Delete

'direction' => [

[81] Fix | Delete

'',

[82] Fix | Delete

'column',

[83] Fix | Delete

'column-reverse',

[84] Fix | Delete

],

[85] Fix | Delete

],

[86] Fix | Delete

] );

[87] Fix | Delete

[88] Fix | Delete

$fields['justify_content'] = [

[89] Fix | Delete

'label' => esc_html__( 'Justify Content', 'elementor' ),

[90] Fix | Delete

'type' => Controls_Manager::CHOOSE,

[91] Fix | Delete

'label_block' => true,

[92] Fix | Delete

'default' => '',

[93] Fix | Delete

'options' => [

[94] Fix | Delete

'flex-start' => [

[95] Fix | Delete

'title' => esc_html__( 'Start', 'elementor' ),

[96] Fix | Delete

'icon' => 'eicon-flex eicon-justify-start-h',

[97] Fix | Delete

],

[98] Fix | Delete

'center' => [

[99] Fix | Delete

'title' => esc_html__( 'Center', 'elementor' ),

[100] Fix | Delete

'icon' => 'eicon-flex eicon-justify-center-h',

[101] Fix | Delete

],

[102] Fix | Delete

'flex-end' => [

[103] Fix | Delete

'title' => esc_html__( 'End', 'elementor' ),

[104] Fix | Delete

'icon' => 'eicon-flex eicon-justify-end-h',

[105] Fix | Delete

],

[106] Fix | Delete

'space-between' => [

[107] Fix | Delete

'title' => esc_html__( 'Space Between', 'elementor' ),

[108] Fix | Delete

'icon' => 'eicon-flex eicon-justify-space-between-h',

[109] Fix | Delete

],

[110] Fix | Delete

'space-around' => [

[111] Fix | Delete

'title' => esc_html__( 'Space Around', 'elementor' ),

[112] Fix | Delete

'icon' => 'eicon-flex eicon-justify-space-around-h',

[113] Fix | Delete

],

[114] Fix | Delete

'space-evenly' => [

[115] Fix | Delete

'title' => esc_html__( 'Space Evenly', 'elementor' ),

[116] Fix | Delete

'icon' => 'eicon-flex eicon-justify-space-evenly-h',

[117] Fix | Delete

],

[118] Fix | Delete

],

[119] Fix | Delete

'selectors' => [

[120] Fix | Delete

'{{SELECTOR}}' => '--justify-content: {{VALUE}};',

[121] Fix | Delete

],

[122] Fix | Delete

'responsive' => true,

[123] Fix | Delete

];

[124] Fix | Delete

[125] Fix | Delete

$fields['align_items'] = [

[126] Fix | Delete

'label' => esc_html__( 'Align Items', 'elementor' ),

[127] Fix | Delete

'type' => Controls_Manager::CHOOSE,

[128] Fix | Delete

'default' => '',

[129] Fix | Delete

'options' => [

[130] Fix | Delete

'flex-start' => [

[131] Fix | Delete

'title' => esc_html__( 'Start', 'elementor' ),

[132] Fix | Delete

'icon' => 'eicon-flex eicon-align-start-v',

[133] Fix | Delete

],

[134] Fix | Delete

'center' => [

[135] Fix | Delete

'title' => esc_html__( 'Center', 'elementor' ),

[136] Fix | Delete

'icon' => 'eicon-flex eicon-align-center-v',

[137] Fix | Delete

],

[138] Fix | Delete

'flex-end' => [

[139] Fix | Delete

'title' => esc_html__( 'End', 'elementor' ),

[140] Fix | Delete

'icon' => 'eicon-flex eicon-align-end-v',

[141] Fix | Delete

],

[142] Fix | Delete

'stretch' => [

[143] Fix | Delete

'title' => esc_html__( 'Stretch', 'elementor' ),

[144] Fix | Delete

'icon' => 'eicon-flex eicon-align-stretch-v',

[145] Fix | Delete

],

[146] Fix | Delete

],

[147] Fix | Delete

'selectors' => [

[148] Fix | Delete

'{{SELECTOR}}' => '--align-items: {{VALUE}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',

[149] Fix | Delete

],

[150] Fix | Delete

'responsive' => true,

[151] Fix | Delete

];

[152] Fix | Delete

[153] Fix | Delete

$fields['gap'] = [

[154] Fix | Delete

'label' => esc_html__( 'Gaps', 'elementor' ),

[155] Fix | Delete

'type' => Controls_Manager::GAPS,

[156] Fix | Delete

'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],

[157] Fix | Delete

'default' => [

[158] Fix | Delete

'unit' => 'px',

[159] Fix | Delete

],

[160] Fix | Delete

'separator' => 'before',

[161] Fix | Delete

'selectors' => [

[162] Fix | Delete

'{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',

[163] Fix | Delete

],

[164] Fix | Delete

'responsive' => true,

[165] Fix | Delete

'conversion_map' => [

[166] Fix | Delete

'old_key' => 'size',

[167] Fix | Delete

'new_key' => 'column',

[168] Fix | Delete

],

[169] Fix | Delete

'upgrade_conversion_map' => [

[170] Fix | Delete

'old_key' => 'size',

[171] Fix | Delete

'new_keys' => [ 'column', 'row' ],

[172] Fix | Delete

],

[173] Fix | Delete

'validators' => [

[174] Fix | Delete

'Number' => [

[175] Fix | Delete

'min' => 0,

[176] Fix | Delete

],

[177] Fix | Delete

],

[178] Fix | Delete

];

[179] Fix | Delete

[180] Fix | Delete

$fields['wrap'] = [

[181] Fix | Delete

'label' => esc_html__( 'Wrap', 'elementor' ),

[182] Fix | Delete

'type' => Controls_Manager::CHOOSE,

[183] Fix | Delete

'options' => [

[184] Fix | Delete

'nowrap' => [

[185] Fix | Delete

'title' => esc_html__( 'No Wrap', 'elementor' ),

[186] Fix | Delete

'icon' => 'eicon-flex eicon-nowrap',

[187] Fix | Delete

],

[188] Fix | Delete

'wrap' => [

[189] Fix | Delete

'title' => esc_html__( 'Wrap', 'elementor' ),

[190] Fix | Delete

'icon' => 'eicon-flex eicon-wrap',

[191] Fix | Delete

],

[192] Fix | Delete

],

[193] Fix | Delete

'description' => esc_html__( 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).', 'elementor' ),

[194] Fix | Delete

'default' => '',

[195] Fix | Delete

'selectors' => [

[196] Fix | Delete

'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',

[197] Fix | Delete

],

[198] Fix | Delete

'responsive' => true,

[199] Fix | Delete

];

[200] Fix | Delete

[201] Fix | Delete

$fields['align_content'] = [

[202] Fix | Delete

'label' => esc_html__( 'Align Content', 'elementor' ),

[203] Fix | Delete

'type' => Controls_Manager::CHOOSE,

[204] Fix | Delete

'label_block' => true,

[205] Fix | Delete

'default' => '',

[206] Fix | Delete

'options' => [

[207] Fix | Delete

'flex-start' => [

[208] Fix | Delete

'title' => esc_html__( 'Start', 'elementor' ),

[209] Fix | Delete

'icon' => 'eicon-justify-start-v',

[210] Fix | Delete

],

[211] Fix | Delete

'center' => [

[212] Fix | Delete

'title' => esc_html__( 'Middle', 'elementor' ),

[213] Fix | Delete

'icon' => 'eicon-justify-center-v',

[214] Fix | Delete

],

[215] Fix | Delete

'flex-end' => [

[216] Fix | Delete

'title' => esc_html__( 'End', 'elementor' ),

[217] Fix | Delete

'icon' => 'eicon-justify-end-v',

[218] Fix | Delete

],

[219] Fix | Delete

'space-between' => [

[220] Fix | Delete

'title' => esc_html__( 'Space Between', 'elementor' ),

[221] Fix | Delete

'icon' => 'eicon-justify-space-between-v',

[222] Fix | Delete

],

[223] Fix | Delete

'space-around' => [

[224] Fix | Delete

'title' => esc_html__( 'Space Around', 'elementor' ),

[225] Fix | Delete

'icon' => 'eicon-justify-space-around-v',

[226] Fix | Delete

],

[227] Fix | Delete

'space-evenly' => [

[228] Fix | Delete

'title' => esc_html__( 'Space Evenly', 'elementor' ),

[229] Fix | Delete

'icon' => 'eicon-justify-space-evenly-v',

[230] Fix | Delete

],

[231] Fix | Delete

],

[232] Fix | Delete

'selectors' => [

[233] Fix | Delete

'{{SELECTOR}}' => '--align-content: {{VALUE}};',

[234] Fix | Delete

],

[235] Fix | Delete

'condition' => [

[236] Fix | Delete

'wrap' => 'wrap',

[237] Fix | Delete

],

[238] Fix | Delete

'responsive' => true,

[239] Fix | Delete

];

[240] Fix | Delete

[241] Fix | Delete

return $fields;

[242] Fix | Delete

}

[243] Fix | Delete

[244] Fix | Delete

protected function get_default_options() {

[245] Fix | Delete

return [

[246] Fix | Delete

'popover' => false,

[247] Fix | Delete

];

[248] Fix | Delete

}

[249] Fix | Delete

}

[250] Fix | Delete

[251] Fix | Delete