You are here

public function WebformElementBase::form in Webform 8.5

Same name and namespace in other branches
  1. 6.x src/Plugin/WebformElementBase.php \Drupal\webform\Plugin\WebformElementBase::form()

Gets the actual configuration webform array to be built.

Parameters

array $form: An associative array containing the structure of the form.

\Drupal\Core\Form\FormStateInterface $form_state: The current state of the form.

Return value

array An associative array contain the element's configuration webform without any default values.

Overrides WebformElementInterface::form

30 calls to WebformElementBase::form()
BooleanBase::form in src/Plugin/WebformElement/BooleanBase.php
Gets the actual configuration webform array to be built.
Captcha::form in src/Plugin/WebformElement/Captcha.php
Gets the actual configuration webform array to be built.
Color::form in src/Plugin/WebformElement/Color.php
Gets the actual configuration webform array to be built.
ContainerBase::form in src/Plugin/WebformElement/ContainerBase.php
Gets the actual configuration webform array to be built.
DateBase::form in src/Plugin/WebformElement/DateBase.php
Gets the actual configuration webform array to be built.

... See full list

30 methods override WebformElementBase::form()
BooleanBase::form in src/Plugin/WebformElement/BooleanBase.php
Gets the actual configuration webform array to be built.
Captcha::form in src/Plugin/WebformElement/Captcha.php
Gets the actual configuration webform array to be built.
Color::form in src/Plugin/WebformElement/Color.php
Gets the actual configuration webform array to be built.
ContainerBase::form in src/Plugin/WebformElement/ContainerBase.php
Gets the actual configuration webform array to be built.
DateBase::form in src/Plugin/WebformElement/DateBase.php
Gets the actual configuration webform array to be built.

... See full list

File

src/Plugin/WebformElementBase.php, line 2355

Class

WebformElementBase
Provides a base class for a webform element.

Namespace

Drupal\webform\Plugin

Code

public function form(array $form, FormStateInterface $form_state) {

  /** @var \Drupal\webform_ui\Form\WebformUiElementFormInterface $form_object */
  $form_object = $form_state
    ->getFormObject();
  $webform = $form_object
    ->getWebform();
  $element_properties = $form_state
    ->get('element_properties');

  /**************************************************************************/

  // General.

  /**************************************************************************/

  /* Element settings */
  $form['element'] = [
    '#type' => 'fieldset',
    '#title' => $this
      ->t('Element settings'),
    '#access' => TRUE,
    '#weight' => -50,
  ];
  $form['element']['title'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Title'),
    '#maxlength' => NULL,
    '#description' => $this
      ->t('This is used as a descriptive label when displaying this webform element.'),
    '#required' => TRUE,
    '#attributes' => [
      'autofocus' => 'autofocus',
    ],
  ];
  $form['element']['value'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Value'),
    '#description' => $this
      ->t('The value of the webform element.'),
  ];
  $form['element']['multiple'] = [
    '#title' => $this
      ->t('Allowed number of values'),
    '#type' => 'webform_element_multiple',
  ];
  $form['element']['multiple_error'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Custom allowed number of values error message'),
    '#description' => $this
      ->t('If set, this message will be used when an element\'s allowed number of values is exceeded, instead of the default "@message" message.', [
      '@message' => $this
        ->t('%name: this element cannot hold more than @count values.'),
    ]),
    '#states' => [
      'visible' => [
        ':input[name="properties[multiple][container][cardinality]"]' => [
          'value' => 'number',
        ],
        ':input[name="properties[multiple][container][cardinality_number]"]' => [
          '!value' => 1,
        ],
      ],
    ],
  ];

  /* Element description/help/more */
  $form['element_description'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Element description/help/more'),
  ];
  $form['element_description']['description'] = [
    '#type' => 'webform_html_editor',
    '#title' => $this
      ->t('Description'),
    '#description' => $this
      ->t('A short description of the element used as help for the user when they use the webform.'),
  ];
  $form['element_description']['help'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Help'),
    '#description' => $this
      ->t("Displays a Help tooltip after the element's title."),
    '#states' => [
      'invisible' => [
        [
          ':input[name="properties[title_display]"]' => [
            'value' => 'invisible',
          ],
        ],
      ],
    ],
  ];
  $form['element_description']['help']['help_title'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Help title'),
    '#description' => $this
      ->t("The text displayed in Help tooltip after the element's title.") . '<br /><br />' . $this
      ->t("Defaults to the element's title"),
  ];
  $form['element_description']['help']['help'] = [
    '#type' => 'webform_html_editor',
    '#title' => $this
      ->t('Help text'),
    '#description' => $this
      ->t("The text displayed in Help tooltip after the element's title."),
  ];
  $form['element_description']['more'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('More'),
    '#description' => $this
      ->t("Displays a read more hide/show widget below the element's description."),
  ];
  $form['element_description']['more']['more_title'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('More title'),
    '#description' => $this
      ->t('The click-able label used to open and close more text.') . '<br /><br />' . $this
      ->t('Defaults to: %value', [
      '%value' => $this->configFactory
        ->get('webform.settings')
        ->get('element.default_more_title'),
    ]),
  ];
  $form['element_description']['more']['more'] = [
    '#type' => 'webform_html_editor',
    '#title' => $this
      ->t('More text'),
    '#description' => $this
      ->t('A long description of the element that provides form additional information which can opened and closed.'),
  ];

  /* Form display */
  $form['form'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Form display'),
  ];
  $form['form']['display_container'] = $this
    ->getFormInlineContainer();
  $form['form']['display_container']['title_display'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Title display'),
    '#empty_option' => $this
      ->t('- Default -'),
    '#options' => [
      'before' => $this
        ->t('Before'),
      'after' => $this
        ->t('After'),
      'inline' => $this
        ->t('Inline'),
      'invisible' => $this
        ->t('Invisible'),
      'none' => $this
        ->t('None'),
    ],
    '#description' => $this
      ->t('Determines the placement of the title.'),
  ];

  // Displaying the title after the element is not supported by
  // the composite (fieldset) wrapper.
  if ($this
    ->hasCompositeFormElementWrapper()) {
    unset($form['form']['display_container']['title_display']['#options']['after']);
  }
  $form['form']['display_container']['description_display'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Description display'),
    '#empty_option' => $this
      ->t('- Default -'),
    '#options' => [
      'before' => $this
        ->t('Before'),
      'after' => $this
        ->t('After'),
      'invisible' => $this
        ->t('Invisible'),
      'tooltip' => $this
        ->t('Tooltip'),
    ],
    '#description' => $this
      ->t('Determines the placement of the description.'),
  ];
  $form['form']['display_container']['help_display'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Help display'),
    '#empty_option' => $this
      ->t('- Default -'),
    '#options' => [
      'title_before' => $this
        ->t('Before title'),
      'title_after' => $this
        ->t('After title'),
      'element_before' => $this
        ->t('Before element'),
      'element_after' => $this
        ->t('After element'),
    ],
    '#description' => $this
      ->t('Determines the placement of the Help tooltip.'),
  ];
  if ($this
    ->hasProperty('title_display')) {
    $form['form']['title_display_message'] = [
      '#type' => 'webform_message',
      '#message_type' => 'warning',
      '#message_message' => $this
        ->t("Please note: Settings the element's title display to 'none' means the title will not be rendered or accessible to screenreaders"),
      '#message_close' => TRUE,
      '#message_storage' => WebformMessage::STORAGE_LOCAL,
      '#access' => TRUE,
      '#states' => [
        'visible' => [
          ':input[name="properties[title_display]"]' => [
            'value' => 'none',
          ],
        ],
      ],
    ];
  }

  // Remove unsupported title and description display from composite elements.
  if ($this
    ->isComposite()) {
    unset($form['form']['display_container']['title_display']['#options']['inline']);
    unset($form['form']['display_container']['description_display']['#options']['tooltip']);
  }

  // Remove unsupported title display from certain element types.
  $element_types = [
    'webform_codemirror',
    'webform_email_confirm',
    'webform_htmleditor',
    'webform_mapping',
    'webform_signature',
  ];
  if (in_array($this
    ->getPluginId(), $element_types)) {
    unset($form['form']['display_container']['title_display']['#options']['inline']);
  }

  // Remove unsupported title display from certain element types.
  $element_types = [
    'fieldset',
    'details',
    'webform_codemirror',
    'webform_email_confirm',
    'webform_htmleditor',
    'webform_image_select',
    'webform_likert',
    'webform_mapping',
    'webform_signature',
  ];
  if (in_array($this
    ->getPluginId(), $element_types)) {
    unset($form['form']['display_container']['title_display']['#options']['inline']);
  }
  $form['form']['field_container'] = $this
    ->getFormInlineContainer();
  $form['form']['field_container']['field_prefix'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Field prefix'),
    '#description' => $this
      ->t('Text or code that is placed directly in front of the input. This can be used to prefix an input with a constant string. Examples: $, #, -.'),
    '#size' => 10,
  ];
  $form['form']['field_container']['field_suffix'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Field suffix'),
    '#description' => $this
      ->t('Text or code that is placed directly after the input. This can be used to add a unit to an input. Examples: lb, kg, %.'),
    '#size' => 10,
  ];
  $form['form']['length_container'] = $this
    ->getFormInlineContainer();
  $form['form']['length_container']['minlength'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Minlength'),
    '#description' => $this
      ->t('The element may still be empty unless it is required.'),
    '#min' => 1,
    '#size' => 4,
  ];
  $form['form']['length_container']['maxlength'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Maxlength'),
    '#description' => $this
      ->t('Leaving blank will use the default maxlength.'),
    '#min' => 1,
    '#size' => 4,
  ];
  $form['form']['size_container'] = $this
    ->getFormInlineContainer();
  $form['form']['size_container']['size'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Size'),
    '#description' => $this
      ->t('Leaving blank will use the default size.'),
    '#min' => 1,
    '#size' => 4,
  ];
  $form['form']['size_container']['rows'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Rows'),
    '#description' => $this
      ->t('Leaving blank will use the default rows.'),
    '#min' => 1,
    '#size' => 4,
  ];
  $form['form']['placeholder'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Placeholder'),
    '#description' => $this
      ->t('The placeholder will be shown in the element until the user starts entering a value.'),
  ];
  $form['form']['autocomplete'] = [
    '#type' => 'webform_select_other',
    '#title' => $this
      ->t('Autocomplete'),
    '#description' => $this
      ->t("Setting autocomplete to off will disable autocompletion for this element. Select 'Autofill' to use semantic attribute values for collecting certain types of user information."),
    '#options' => [
      'on' => $this
        ->t('On'),
      'off' => $this
        ->t('Off'),
    ],
    '#other__type' => 'select',
    '#other__option_label' => $this
      ->t('Autofill…'),
    '#other__title' => $this
      ->t('Autocomplete autofill'),
    '#other__description' => $this
      ->t("Browsers sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. The autocomplete (autofill) attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature."),
    '#other__options' => [
      (string) $this
        ->t('Biographical attributes') => [
        "name" => $this
          ->t('Full name'),
        "honorific-prefix" => $this
          ->t('Honorific prefix'),
        "given-name" => $this
          ->t('Given name'),
        "additional-name" => $this
          ->t('Additional names'),
        "family-name" => $this
          ->t('Family name'),
        "honorific-suffix" => $this
          ->t('Honorific suffix'),
        "nickname" => $this
          ->t('Nickname'),
        "username" => $this
          ->t('Username'),
        "new-password" => $this
          ->t('New password'),
        "current-password" => $this
          ->t('Current password'),
        "organization-title" => $this
          ->t('Organization job title'),
        "organization" => $this
          ->t('Organization name'),
        "language" => $this
          ->t('Preferred language'),
        "bday" => $this
          ->t('Birthday'),
        "bday-day" => $this
          ->t('Birthday day'),
        "bday-month" => $this
          ->t('Birthday month'),
        "bday-year" => $this
          ->t('Birthday year'),
        "sex" => $this
          ->t('Gender'),
        "url" => $this
          ->t('Contact URL'),
        "photo" => $this
          ->t('Contact photo'),
        "email" => $this
          ->t('Email'),
        "impp" => $this
          ->t('Instant messaging URL'),
      ],
      (string) $this
        ->t('Address attributes') => [
        "street-address" => $this
          ->t('Street address (multiline)'),
        "address-line1" => $this
          ->t('Address line 1'),
        "address-line2" => $this
          ->t('Address line 2'),
        "address-line3" => $this
          ->t('Address line 3'),
        "address-level1" => $this
          ->t('Address level 1'),
        "address-level2" => $this
          ->t('Address level 2'),
        "address-level3" => $this
          ->t('Address level 3'),
        "address-level4" => $this
          ->t('Address level 4'),
        "country" => $this
          ->t('Country code'),
        "country-name" => $this
          ->t('Country name'),
        "postal-code" => $this
          ->t('Postal code / Zip code'),
      ],
      (string) $this
        ->t('Telephone attributes') => [
        "tel" => $this
          ->t('Telephone'),
        "home tel" => $this
          ->t('Telephone - home'),
        "work tel" => $this
          ->t('Telephone - work'),
        "work tel-extension" => $this
          ->t('Telephone - work extension'),
        "mobile tel" => $this
          ->t('Telephone - mobile'),
        "fax tel" => $this
          ->t('Telephone - fax'),
        "pager tel" => $this
          ->t('Telephone - pager'),
        "tel-country-code" => $this
          ->t('Telephone country code'),
        "tel-national" => $this
          ->t('Telephone national code'),
        "tel-area-code" => $this
          ->t('Telephone area code'),
        "tel-local" => $this
          ->t('Telephone local number'),
        "tel-local-prefix" => $this
          ->t('Telephone local prefix'),
        "tel-local-suffix" => $this
          ->t('Telephone local suffix'),
        "tel-extension" => $this
          ->t('Telephone extension'),
      ],
      (string) $this
        ->t('Commerce attributes') => [
        "cc-name" => $this
          ->t('Name on card'),
        "cc-given-name" => $this
          ->t('Given name on card'),
        "cc-additional-name" => $this
          ->t('Additional names on card'),
        "cc-family-name" => $this
          ->t('Family name on card'),
        "cc-number" => $this
          ->t('Card number'),
        "cc-exp" => $this
          ->t('Card expiry date'),
        "cc-exp-month" => $this
          ->t('Card expiry month'),
        "cc-exp-year" => $this
          ->t('Card expiry year'),
        "cc-csc" => $this
          ->t('Card Security Code'),
        "cc-type" => $this
          ->t('Card type'),
        "transaction-currency" => $this
          ->t('Transaction currency'),
        "transaction-amount" => $this
          ->t('Transaction amount'),
      ],
    ],
  ];
  $form['form']['disabled'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Disabled'),
    '#description' => $this
      ->t('Make this element non-editable with the user entered (e.g. via developer tools) value <strong>ignored</strong>. Useful for displaying default value. Changeable via JavaScript.'),
    '#return_value' => TRUE,
    '#weight' => 50,
  ];
  $form['form']['readonly'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Readonly'),
    '#description' => $this
      ->t('Make this element non-editable with the user entered (e.g. via developer tools) value <strong>submitted</strong>. Useful for displaying default value. Changeable via JavaScript.'),
    '#return_value' => TRUE,
    '#weight' => 50,
  ];
  $form['form']['prepopulate'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Prepopulate'),
    '#description' => $this
      ->t('Allow element to be populated using query string parameters.'),
    '#return_value' => TRUE,
    '#weight' => 50,
  ];

  // Disabled check element when prepopulate is enabled for all elements.
  if ($webform
    ->getSetting('form_prepopulate') && $this
    ->hasProperty('prepopulate')) {
    $form['form']['prepopulate_disabled'] = [
      '#description' => $this
        ->t('Prepopulation is enabled for all form elements.'),
      '#value' => TRUE,
      '#disabled' => TRUE,
      '#access' => TRUE,
    ] + $form['form']['prepopulate'];
    $form['form']['prepopulate']['#value'] = FALSE;
    $form['form']['prepopulate']['#access'] = FALSE;
  }
  $form['form']['open'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Open'),
    '#description' => $this
      ->t('Contents should be visible (open) to the user.'),
    '#return_value' => TRUE,
    '#weight' => 50,
  ];

  /* Validation */

  // Placeholder webform elements with #options.
  // @see \Drupal\webform\Plugin\WebformElement\OptionsBase::form
  $form['options'] = [];
  $form['options_other'] = [];
  $form['validation'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Form validation'),
  ];
  $error_messages = [
    'required_error',
    'unique_error',
    'pattern_error',
  ];
  $validation_html_message_states = [];
  foreach ($error_messages as $error_message) {
    if ($this
      ->hasProperty($error_message)) {
      if ($validation_html_message_states) {
        $validation_html_message_states[] = 'or';
      }
      $validation_html_message_states[] = [
        ':input[name="properties[' . $error_message . ']"]' => [
          'value' => [
            'pattern' => '(<[a-z][^>]*>|&(?:[a-z]+|#\\d+);)',
          ],
        ],
      ];
    }
  }
  if ($validation_html_message_states) {
    $form['validation']['html_message'] = [
      '#type' => 'webform_message',
      '#message_message' => $this
        ->t('Validation error message contains HTML markup. HTML markup can not be display via HTML5 clientside validation and will be removed.'),
      '#message_type' => 'warning',
      '#states' => [
        'visible' => $validation_html_message_states,
      ],
      '#access' => TRUE,
    ];
  }
  $form['validation']['required_container'] = [
    '#type' => 'container',
  ];
  $form['validation']['required_container']['required'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Required'),
    '#description' => $this
      ->t('Check this option if the user must enter a value.'),
    '#return_value' => TRUE,
  ];
  $form['validation']['required_container']['required_error'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Required message'),
    '#description' => $this
      ->t('If set, this message will be used when a required webform element is empty, instead of the default "Field x is required." message.'),
    '#states' => [
      'visible' => [
        ':input[name="properties[required]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['validation']['unique_container'] = $this
    ->getFormInlineContainer();
  $form['validation']['unique_container']['unique'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Unique'),
    '#description' => $this
      ->t('Check that all entered values for this element are unique.'),
    '#return_value' => TRUE,
  ];
  $form['validation']['unique_container']['unique_entity'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Unique per entity'),
    '#description' => $this
      ->t('Check that entered values for this element is unique for the current source entity.'),
    '#return_value' => TRUE,
    '#states' => [
      'visible' => [
        [
          'input[name="properties[unique]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ],
  ];
  $form['validation']['unique_container']['unique_user'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Unique per user'),
    '#description' => $this
      ->t('Check that entered values for this element are unique for the current user.'),
    '#return_value' => TRUE,
    '#states' => [
      'visible' => [
        [
          'input[name="properties[unique]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ],
  ];
  $form['validation']['unique_error'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Unique message'),
    '#description' => $this
      ->t('If set, this message will be used when an element\'s value are not unique, instead of the default "@message" message.', [
      '@message' => $this
        ->t('The value %value has already been submitted once for the %name element. You may have already submitted this webform, or you need to use a different value.'),
    ]),
    '#states' => [
      'visible' => [
        [
          ':input[name="properties[unique]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ],
  ];

  /* Flexbox item */
  $form['flex'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Flexbox item'),
    '#description' => $this
      ->t('Learn more about using <a href=":href">flexbox layouts</a>.', [
      ':href' => 'https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox',
    ]),
  ];
  $flex_range = range(0, 12);
  $form['flex']['flex'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Flex'),
    '#description' => $this
      ->t('The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.') . '<br /><br />' . $this
      ->t('Defaults to: %value', [
      '%value' => 1,
    ]),
    '#options' => [
      0 => $this
        ->t('0 (none)'),
    ] + array_combine($flex_range, $flex_range),
  ];

  /**************************************************************************/

  // Conditions.

  /**************************************************************************/

  /* Conditional logic */
  $form['conditional_logic'] = [
    '#type' => 'fieldset',
    '#title' => $this
      ->t('Conditional logic'),
  ];
  $form['conditional_logic']['states'] = [
    '#type' => 'webform_element_states',
    '#state_options' => $this
      ->getElementStateOptions(),
    '#selector_options' => $webform
      ->getElementsSelectorOptions(),
    '#selector_sources' => $webform
      ->getElementsSelectorSourceValues(),
    '#disabled_message' => TRUE,
  ];
  $form['conditional_logic']['states_clear'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Clear value(s) when hidden'),
    '#return_value' => TRUE,
    '#description' => $this instanceof ContainerBase ? $this
      ->t("When this container is hidden all this container's subelement values will be cleared.") : $this
      ->t("When this element is hidden, this element's value will be cleared."),
  ];
  if ($this
    ->hasProperty('states') && $this
    ->hasProperty('required')) {
    $form['conditional_logic']['states_required_message'] = [
      '#type' => 'webform_message',
      '#message_type' => 'warning',
      '#message_message' => $this
        ->t('Please note when an element is hidden it will not be required.'),
      '#access' => TRUE,
      '#states' => [
        'visible' => [
          ':input[name="properties[required]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ];
  }

  /**************************************************************************/

  // Advanced.

  /**************************************************************************/

  /* Default value */
  $form['default'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Default value'),
  ];
  if ($this
    ->isComposite()) {
    $form['default']['default_value'] = [
      '#type' => 'webform_codemirror',
      '#mode' => 'yaml',
      '#title' => $this
        ->t('Default value'),
    ];
  }
  else {
    $form['default']['default_value'] = [
      '#type' => 'textfield',
      '#title' => $this
        ->t('Default value'),
      '#maxlength' => NULL,
    ];
  }
  $form['default']['default_value']['#description'] = $this
    ->t('The default value of the webform element.');
  if ($this
    ->hasProperty('multiple')) {
    $form['default']['default_value']['#description'] .= ' ' . $this
      ->t('For multiple options, use commas to separate multiple defaults.');
  }

  // Multiple.
  $form['multiple'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Multiple settings'),
    '#states' => [
      'invisible' => [
        ':input[name="properties[multiple][container][cardinality]"]' => [
          '!value' => -1,
        ],
        ':input[name="properties[multiple][container][cardinality_number]"]' => [
          'value' => 1,
        ],
      ],
    ],
    '#attributes' => [
      'data-webform-states-no-clear' => TRUE,
    ],
  ];
  $form['multiple']['multiple__header'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Display elements in table columns'),
    '#description' => $this
      ->t("If checked, the composite sub-element titles will be displayed as the table header labels."),
    '#return_value' => TRUE,
  ];
  $form['multiple']['multiple__header_label'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Table header label'),
    '#description' => $this
      ->t('This is used as the table header for this webform element when displaying multiple values.'),
  ];
  $form['multiple']['multiple__item_label'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Item label'),
    '#description' => $this
      ->t('This is used by the add/remove (+/-) icons.'),
  ];
  $form['multiple']['multiple__no_items_message'] = [
    '#type' => 'webform_html_editor',
    '#title' => $this
      ->t('No items message'),
    '#description' => $this
      ->t('This is used when there are no items entered.'),
  ];
  $form['multiple']['multiple__min_items'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Minimum amount of items'),
    '#description' => $this
      ->t('Minimum items defaults to 0 for optional elements and 1 for required elements.'),
    '#min' => 0,
    '#max' => 20,
  ];
  $form['multiple']['multiple__empty_items'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Number of empty items'),
    '#required' => TRUE,
    '#min' => 0,
    '#max' => 20,
  ];
  $form['multiple']['multiple__sorting'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Allow users to sort elements'),
    '#description' => $this
      ->t('If unchecked, the elements will no longer be sortable.'),
    '#return_value' => TRUE,
  ];
  $form['multiple']['multiple__operations'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Allow users to add/remove elements'),
    '#description' => $this
      ->t('If unchecked, the add/remove (+/x) buttons will be removed from each table row.'),
    '#return_value' => TRUE,
  ];
  $form['multiple']['multiple__add'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Show add element button'),
    '#description' => $this
      ->t('If unchecked, the add button will be removed from each table row.'),
    '#return_value' => TRUE,
    '#states' => [
      'visible' => [
        ':input[name="properties[multiple__operations]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['multiple']['multiple__remove'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Show remove element button'),
    '#description' => $this
      ->t('If unchecked, the remove button will be removed from each table row.'),
    '#return_value' => TRUE,
    '#states' => [
      'visible' => [
        ':input[name="properties[multiple__operations]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['multiple']['multiple__add_more'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Allow users to add more items'),
    '#description' => $this
      ->t('If checked, an add more input will be added below the multiple values.'),
    '#return_value' => TRUE,
  ];
  $form['multiple']['multiple__add_more_container'] = [
    '#type' => 'container',
    '#states' => [
      'visible' => [
        ':input[name="properties[multiple__add_more]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['multiple']['multiple__add_more_container']['multiple__add_more_input'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Allow users to input the number of items to be added'),
    '#description' => $this
      ->t('If checked, users will be able to input the number of items to be added.'),
    '#return_value' => TRUE,
  ];
  $form['multiple']['multiple__add_more_container']['multiple__add_more_button_label'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Add more button label'),
    '#description' => $this
      ->t('This is used as the add more items button label for this webform element when displaying multiple values.'),
  ];
  $form['multiple']['multiple__add_more_container']['multiple__add_more_input_label'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Add more input label'),
    '#description' => $this
      ->t('This is used as the add more items input label for this webform element when displaying multiple values.'),
    '#states' => [
      'visible' => [
        ':input[name="properties[multiple__add_more_input]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['multiple']['multiple__add_more_container']['multiple__add_more_items'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Number of add more items'),
    '#required' => TRUE,
    '#min' => 1,
    '#max' => 20,
  ];

  /* Wrapper attributes */
  $form['wrapper_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->hasProperty('wrapper_type') ? $this
      ->t('Wrapper type and attributes') : $this
      ->t('Wrapper attributes'),
  ];
  $form['wrapper_attributes']['wrapper_type'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Wrapper type'),
    '#options' => [
      'fieldset' => $this
        ->t('Fieldset'),
      'form_element' => $this
        ->t('Form element'),
      'container' => $this
        ->t('Container'),
    ],
    '#description' => '<b>' . $this
      ->t('Fieldset') . ':</b> ' . $this
      ->t('Wraps inputs in a fieldset.') . ' <strong>' . $this
      ->t('Recommended') . '</strong>' . '<br/><br/><b>' . $this
      ->t('Form element') . ':</b> ' . $this
      ->t('Wraps inputs in a basic form element with title and description.') . '<br/><br/><b>' . $this
      ->t('Container') . ':</b> ' . $this
      ->t('Wraps inputs in a basic div with no title or description.'),
  ];

  // Hide element description and display when using a container wrapper.
  if ($this
    ->hasProperty('wrapper_type')) {
    $form['element_description']['#states'] = [
      '!visible' => [
        ':input[name="properties[wrapper_type]"]' => [
          'value' => 'container',
        ],
      ],
    ];
    $form['form']['display_container']['#states'] = [
      '!visible' => [
        ':input[name="properties[wrapper_type]"]' => [
          'value' => 'container',
        ],
      ],
    ];
    $form['form']['field_container']['#states'] = [
      '!visible' => [
        ':input[name="properties[wrapper_type]"]' => [
          'value' => 'container',
        ],
      ],
    ];
  }
  $form['wrapper_attributes']['wrapper_attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Wrapper'),
    '#class__description' => $this
      ->t("Apply classes to the element's wrapper around both the field and its label. Select 'custom…' to enter custom classes."),
    '#style__description' => $this
      ->t("Apply custom styles to the element's wrapper around both the field and its label."),
    '#attributes__description' => $this
      ->t("Enter additional attributes to be added to the element's wrapper."),
    '#classes' => $this->configFactory
      ->get('webform.settings')
      ->get('element.wrapper_classes'),
  ];

  /* Element attributes */
  $form['element_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Element attributes'),
  ];
  $form['element_attributes']['attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Element'),
    '#classes' => $this->configFactory
      ->get('webform.settings')
      ->get('element.classes'),
  ];

  /* Label attributes */
  $form['label_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Label attributes'),
  ];
  $form['label_attributes']['label_attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Label'),
    '#class__description' => $this
      ->t("Apply classes to the element's label."),
    '#style__description' => $this
      ->t("Apply custom styles to the element's label."),
    '#attributes__description' => $this
      ->t("Enter additional attributes to be added to the element's label."),
  ];

  // Only display label attribute when the wrapper type is a form element.
  if ($this
    ->hasProperty('wrapper_type')) {
    $form['label_attributes']['#states'] = [
      'visible' => [
        ':input[name="properties[wrapper_type]"]' => [
          'value' => 'form_element',
        ],
      ],
    ];
  }

  /* Summary attributes */
  $form['summary_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Summary attributes'),
  ];
  $form['summary_attributes']['summary_attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Summary'),
    '#class__description' => $this
      ->t("Apply classes to the details' summary around both the field and its label."),
    '#style__description' => $this
      ->t("Apply custom styles to the details' summary."),
    '#attributes__description' => $this
      ->t("Enter additional attributes to be added to the details' summary."),
  ];

  /* Title attributes */
  $form['title_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Title attributes'),
  ];
  $form['title_attributes']['title_attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Title'),
    '#class__description' => $this
      ->t("Apply classes to the title tag."),
    '#style__description' => $this
      ->t("Apply custom styles to the  title tag."),
    '#attributes__description' => $this
      ->t("Enter additional attributes to be added to the title tag."),
  ];

  /* Submission display */
  $has_edit_twig_access = WebformTwigExtension::hasEditTwigAccess();
  $form['display'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Submission display'),
  ];

  // Item.
  $form['display']['item'] = [
    '#type' => 'fieldset',
    '#title' => $this
      ->t('Single item'),
  ];
  $form['display']['item']['format'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Item format'),
    '#description' => $this
      ->t('Select how a single value is displayed.'),
    '#options' => WebformOptionsHelper::appendValueToText($this
      ->getItemFormats()),
  ];
  $format = isset($element_properties['format']) ? $element_properties['format'] : NULL;
  $format_custom = $has_edit_twig_access || $format === 'custom';
  if ($format_custom) {
    $form['display']['item']['format']['#options'] += [
      'custom' => $this
        ->t('Custom…'),
    ];
  }
  $format_custom_states = [
    'visible' => [
      ':input[name="properties[format]"]' => [
        'value' => 'custom',
      ],
    ],
    'required' => [
      ':input[name="properties[format]"]' => [
        'value' => 'custom',
      ],
    ],
  ];
  $form['display']['item']['format_html'] = [
    '#type' => 'webform_codemirror',
    '#mode' => 'twig',
    '#title' => $this
      ->t('Item format custom HTML'),
    '#description' => $this
      ->t('The HTML to display for a single element value. You may include HTML or <a href=":href">Twig</a>. You may enter data from the submission as per the "variables" below.', [
      ':href' => 'http://twig.sensiolabs.org/documentation',
    ]),
    '#states' => $format_custom_states,
    '#access' => $format_custom,
  ];
  $form['display']['item']['format_text'] = [
    '#type' => 'webform_codemirror',
    '#mode' => 'twig',
    '#title' => $this
      ->t('Item format custom Text'),
    '#description' => $this
      ->t('The text to display for a single element value. You may include <a href=":href">Twig</a>. You may enter data from the submission as per the "variables" below.', [
      ':href' => 'http://twig.sensiolabs.org/documentation',
    ]),
    '#states' => $format_custom_states,
    '#access' => $format_custom,
  ];
  if ($has_edit_twig_access) {

    // Containers use the 'children' variable and inputs use the
    // 'value' variable.
    $twig_variables = $this instanceof ContainerBase ? [
      'children' => '{{ children }}',
    ] : [
      'value' => '{{ value }}',
    ];

    // Composite Twig variables.
    if ($this instanceof WebformCompositeBase) {

      // Add composite elements to items.
      $composite_elements = $this
        ->getCompositeElements();
      foreach ($composite_elements as $composite_key => $composite_element) {
        $twig_variables["element.{$composite_key}"] = "{{ element.{$composite_key} }}";
      }
    }
    $formats = $this
      ->getItemFormats();
    foreach ($formats as $format_name => $format) {
      if (is_array($format)) {
        foreach ($format as $sub_format_name => $sub_format) {
          $twig_variables["item['{$sub_format_name}']"] = "{{ item['{$sub_format_name}'] }}";
        }
      }
      else {
        $twig_variables["item.{$format_name}"] = "{{ item.{$format_name} }}";
      }
    }
    $form['display']['item']['twig'] = WebformTwigExtension::buildTwigHelp($twig_variables);
    $form['display']['item']['twig']['#states'] = $format_custom_states;
    WebformElementHelper::setPropertyRecursive($form['display']['item']['twig'], '#access', TRUE);
  }

  // Items.
  $form['display']['items'] = [
    '#type' => 'fieldset',
    '#title' => $this
      ->t('Multiple items'),
    '#states' => [
      'visible' => [
        [
          ':input[name="properties[multiple][container][cardinality]"]' => [
            'value' => '-1',
          ],
        ],
        'or',
        [
          ':input[name="properties[multiple][container][cardinality_number]"]' => [
            '!value' => 1,
          ],
        ],
      ],
    ],
  ];
  $form['display']['items']['format_items'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Items format'),
    '#description' => $this
      ->t('Select how multiple values are displayed.'),
    '#options' => WebformOptionsHelper::appendValueToText($this
      ->getItemsFormats()),
  ];
  $format_items = isset($element_properties['format_items']) ? $element_properties['format_items'] : NULL;
  $format_items_custom = $has_edit_twig_access || $format_items === 'custom';
  if ($format_items_custom) {
    $form['display']['items']['format_items']['#options'] += [
      'custom' => $this
        ->t('Custom…'),
    ];
  }
  $format_items_custom_states = [
    'visible' => [
      ':input[name="properties[format_items]"]' => [
        'value' => 'custom',
      ],
    ],
    'required' => [
      ':input[name="properties[format_items]"]' => [
        'value' => 'custom',
      ],
    ],
  ];
  $form['display']['items']['format_items_html'] = [
    '#type' => 'webform_codemirror',
    '#mode' => 'twig',
    '#title' => $this
      ->t('Items format custom HTML'),
    '#description' => $this
      ->t('The HTML to display for multiple element values. You may include HTML or <a href=":href">Twig</a>. You may enter data from the submission as per the "variables" below.', [
      ':href' => 'http://twig.sensiolabs.org/documentation',
    ]),
    '#states' => $format_items_custom_states,
    '#access' => $format_items_custom,
  ];
  $form['display']['items']['format_items_text'] = [
    '#type' => 'webform_codemirror',
    '#mode' => 'twig',
    '#title' => $this
      ->t('Items format custom Text'),
    '#description' => $this
      ->t('The text to display for multiple element values. You may include <a href=":href">Twig</a>. You may enter data from the submission as per the "variables" below.', [
      ':href' => 'http://twig.sensiolabs.org/documentation',
    ]),
    '#states' => $format_items_custom_states,
    '#access' => $format_items_custom,
  ];
  if ($format_items_custom) {
    $twig_variables = [
      '{{ value }}',
      '{{ items }}',
    ];
    $form['display']['items']['twig'] = WebformTwigExtension::buildTwigHelp($twig_variables);
    $form['display']['items']['twig']['#states'] = $format_items_custom_states;
    WebformElementHelper::setPropertyRecursive($form['display']['items']['twig'], '#access', TRUE);
  }
  $form['display']['format_attributes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Display wrapper attributes'),
  ];
  $form['display']['format_attributes']['format_attributes'] = [
    '#type' => 'webform_element_attributes',
    '#title' => $this
      ->t('Display'),
    '#class__description' => $this
      ->t("Apply classes to the element's display wrapper. Select 'custom…' to enter custom classes."),
    '#style__description' => $this
      ->t("Apply custom styles to the element's display wrapper."),
    '#attributes__description' => $this
      ->t("Enter additional attributes to be added to the element's display wrapper."),
    '#classes' => $this->configFactory
      ->get('webform.settings')
      ->get('element.wrapper_classes'),
  ];

  /* Administration */
  $form['admin'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Administration'),
  ];
  $form['admin']['private'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Private'),
    '#description' => $this
      ->t('Private elements are shown only to users with results access.'),
    '#weight' => 50,
    '#return_value' => TRUE,
  ];
  $form['admin']['admin_title'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Admin title'),
    '#description' => $this
      ->t('The admin title will always be displayed when managing elements and viewing & downloading submissions.') . '<br/>' . $this
      ->t("If an element's title is hidden, the element's admin title will be displayed when viewing a submission."),
  ];
  $form['admin']['admin_notes'] = [
    '#type' => 'webform_html_editor',
    '#title' => $this
      ->t('Admin notes/comments'),
    '#description' => $this
      ->t("Admin notes/comments are display next to the element title in the form builder and visible in the form's YAML source"),
  ];

  /**************************************************************************/

  // Access.

  /**************************************************************************/

  /* Access */
  $operations = [
    'create' => [
      '#title' => $this
        ->t('Create submission'),
      '#description' => $this
        ->t('Select roles and users that should be able to populate this element when creating a new submission.'),
      '#open' => TRUE,
    ],
    'update' => [
      '#title' => $this
        ->t('Update submission'),
      '#description' => $this
        ->t('Select roles and users that should be able to update this element when updating an existing submission.'),
      '#open' => FALSE,
    ],
    'view' => [
      '#title' => $this
        ->t('View submission'),
      '#description' => $this
        ->t('Select roles and users that should be able to view this element when viewing a submission.'),
      '#open' => FALSE,
    ],
  ];
  $form['access'] = [
    '#type' => 'container',
    '#attributes' => [
      'data-webform-states-no-clear' => TRUE,
    ],
  ];
  if (!$this->currentUser
    ->hasPermission('administer webform') && !$this->currentUser
    ->hasPermission('administer webform element access')) {
    $form['access']['#access'] = FALSE;
  }
  foreach ($operations as $operation => $operation_element) {
    $form['access']['access_' . $operation] = $operation_element + [
      '#type' => 'details',
      '#states' => [
        'visible' => [
          ':input[name="properties[access]"]' => [
            'checked' => TRUE,
          ],
        ],
      ],
    ];
    $form['access']['access_' . $operation]['access_' . $operation . '_roles'] = [
      '#type' => 'webform_roles',
      '#title' => $this
        ->t('Roles'),
    ];
    $form['access']['access_' . $operation]['access_' . $operation . '_users'] = [
      '#type' => 'webform_users',
      '#title' => $this
        ->t('Users'),
    ];
    $form['access']['access_' . $operation]['access_' . $operation . '_permissions'] = [
      '#type' => 'webform_permissions',
      '#title' => $this
        ->t('Permissions'),
      '#multiple' => TRUE,
      '#select2' => TRUE,
    ];
  }
  $form['access']['access'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Display element'),
    '#description' => $this
      ->t('If unchecked, the element is never displayed. The element will only be visible within the form builder and hidden from all other displays including submission details, results, and download.'),
    '#weight' => 50,
    '#return_value' => TRUE,
  ];

  /**************************************************************************/

  // Disable #multiple if the element has submission data.
  if (!$form_object
    ->isNew() && $this
    ->hasProperty('multiple')) {
    $element_key = $form_object
      ->getKey();
    if ($this->submissionStorage
      ->hasSubmissionValue($webform, $element_key)) {
      $form['element']['multiple']['#disabled'] = TRUE;
      $form['element']['multiple']['#description'] = '<em>' . $this
        ->t('There is data for this element in the database. This setting can no longer be changed.') . '</em>';
    }
  }

  // Add warning to all password elements that are stored in the database.
  if (strpos($this->pluginId, 'password') !== FALSE && !$webform
    ->getSetting('results_disabled')) {
    $form['element']['password_message'] = [
      '#type' => 'webform_message',
      '#message_type' => 'warning',
      '#message_message' => $this
        ->t('Webform submissions store passwords as plain text.') . ' ' . $this
        ->t('<a href=":href">Encryption</a> should be enabled for this element.', [
        ':href' => 'https://www.drupal.org/project/webform_encrypt',
      ]),
      '#access' => TRUE,
      '#weight' => -100,
      '#message_close' => TRUE,
      '#message_storage' => WebformMessage::STORAGE_SESSION,
    ];
  }
  return $form;
}