first commit

themes/bootstrap/templates/input/datetime-form.html.twig

@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a datetime form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the datetime form element.
+ * - content: The datelist form element to be output.
+ *
+ * @see template_preprocess_datetime_form()
+ *
+ * @ingroup templates
+ */
+#}
+<div{{ attributes.addClass('container-inline', 'form-inline') }}>
+  {{ content }}
+</div>

themes/bootstrap/templates/input/datetime-wrapper.html.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a datetime form wrapper.
+ *
+ * Available variables:
+ * - content: The form element to be output, usually a datelist, or datetime.
+ * - title: The title of the form element.
+ * - title_attributes: HTML attributes for the title wrapper.
+ * - description: Description text for the form element.
+ * - required: An indicator for whether the associated form element is required.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_datetime_wrapper()
+ */
+#}
+{%
+  set title_classes = [
+    'control-label',
+    required ? 'form-required',
+  ]
+%}
+{% if title %}
+  <label{{ title_attributes.addClass(title_classes) }}>{{ title }}</label>
+{% endif %}
+{{ content }}
+{% if errors %}
+  <div class="form-item--error-message alert alert-danger alert-sm">
+    {{ errors }}
+  </div>
+{% endif %}
+{% if description %}
+  <p class="help-block">{{ description }}</p>
+{% endif %}

themes/bootstrap/templates/input/form-element-label.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a form element label.
+ *
+ * Available variables:
+ * - element: an input element.
+ * - title: The label's text.
+ * - title_display: Elements title_display setting.
+ * - description: element description.
+ * - required: An indicator for whether the associated form element is required.
+ * - is_checkbox: Whether the label is outputted in checkbox context.
+ * - is_radio: Whether the label is outputted in radio button context.
+ * - attributes: A list of HTML attributes for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_form_element_label()
+ */
+#}
+{%-
+  set classes = [
+    'control-label',
+    title_display == 'after' ? 'option',
+    title_display == 'invisible' and not (is_checkbox or is_radio) ? 'sr-only',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
+-%}
+{% if title is not empty and title_display == 'invisible' and (is_checkbox or is_radio) -%}
+  {#
+  Clear but preserve label text as attribute (e.g. for screen readers) for
+  checkboxes/radio buttons when it actually should be invisible.
+  #}
+  {%- set attributes = attributes.setAttribute('title', title) -%}
+  {%- set title = null -%}
+{%- endif -%}
+{#
+Labels for single checkboxes/radios contain the element itself and thus have
+always to be rendered regardless of whether they have a title or not.
+#}
+{%- if title is not empty or is_checkbox or is_radio -%}
+  <label{{ attributes.addClass(classes) }}>{{ element }}{{ title }}
+    {%- if description -%}
+      <p class="help-block">{{ description }}</p>
+    {%- endif -%}
+  </label>
+{%- endif -%}

themes/bootstrap/templates/input/form-element.html.twig

@@ -0,0 +1,101 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any inline error messages to display for this form
+ *   element; may not be set.
+ * - has_error: (optional) Flag indicating whether to add the "has_error"
+ *   Bootstrap class for this form element.
+ * - required: The required marker, or empty if the associated form element is
+ *   not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ *   - before: The label is output before the element. This is the default.
+ *     The label includes the #title and the required marker, if #required.
+ *   - after: The label is output after the element. For example, this is used
+ *     for radio and checkbox #type elements. If the #title is empty but the
+ *     field is #required, the label will contain only the required marker.
+ *   - invisible: Labels are critical for screen readers to enable them to
+ *     properly navigate through forms but can be visually distracting. This
+ *     property hides the label for everyone except screen readers.
+ *   - attribute: Set the title attribute on the element to create a tooltip but
+ *     output no label element. This is supported only for checkboxes and radios
+ *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ *     It is used where a visual label is not needed, such as a table of
+ *     checkboxes where the row and column provide the context. The tooltip will
+ *     include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ *    - content: A description of the form element, may not be set.
+ *    - attributes: (optional) A list of HTML attributes to apply to the
+ *      description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ *   - before: The description is output before the element.
+ *   - after: The description is output after the element. This is the default
+ *     value.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{%
+  set classes = [
+    'form-item',
+    'js-form-item',
+    'form-type-' ~ type|clean_class,
+    'js-form-type-' ~ type|clean_class,
+    'form-item-' ~ name|clean_class,
+    'js-form-item-' ~ name|clean_class,
+    title_display not in ['after', 'before'] ? 'form-no-label',
+    disabled == 'disabled' ? 'form-disabled',
+    is_form_group ? 'form-group',
+    is_radio ? 'radio',
+    is_checkbox ? 'checkbox',
+    is_autocomplete ? 'form-autocomplete',
+    has_error ? 'error has-error'
+  ]
+%}{%
+  set description_classes = [
+    'description',
+    'help-block',
+    description_display == 'invisible' ? 'visually-hidden',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {% if label_display in ['before', 'invisible'] %}
+    {{ label }}
+  {% endif %}
+
+  {% if description_display == 'before' and description.content %}
+    <div{{ description.attributes.addClass(description_classes) }}>
+      {{ description.content }}
+    </div>
+  {% endif %}
+
+  {{ children }}
+
+  {% if label_display == 'after' %}
+    {{ label }}
+  {% endif %}
+
+  {% if errors %}
+    <div class="form-item--error-message alert alert-danger alert-sm">
+      {{ errors }}
+    </div>
+  {% endif %}
+
+  {% if description_display in ['after', 'invisible'] and description.content %}
+    <div{{ description.attributes.addClass(description_classes) }}>
+      {{ description.content }}
+    </div>
+  {% endif %}
+</div>

themes/bootstrap/templates/input/input--button--split.html.twig

@@ -0,0 +1,58 @@
+{% extends "input--button.html.twig" %}
+{#
+/**
+ * @file
+ * Theme suggestion for "button__split" input form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ * - icon: An icon.
+ * - icon_only: Flag to display only the icon and not the label.
+ * - icon_position: Where an icon should be displayed.
+ * - label: button label.
+ * - prefix: Markup to display before the input element.
+ * - suffix: Markup to display after the input element.
+ * - type: The type of input.
+ *
+ * @ingroup templates
+ *
+ * @see \Drupal\bootstrap\Plugin\Preprocess\InputButton
+ * @see \Drupal\bootstrap\Plugin\Preprocess\Input
+ * @see template_preprocess_input()
+ */
+#}
+
+  {% block input %}{% apply spaceless %}
+    {%
+      set classes = [
+      'btn',
+      type == 'submit' ? 'js-form-submit',
+      icon and icon_position and not icon_only ? 'icon-' ~ icon_position,
+    ]
+    %}
+    {% if icon_only %}
+      <button{{ attributes.addClass(classes, 'icon-only') }}>
+        <span class="sr-only">{{ label }}</span>
+        {{ icon }}
+      </button>
+    {% else %}
+      {% if icon_position == 'after' %}
+        <button{{ attributes.addClass(classes) }}>{{ label }}{{ icon }}</button>{{ children }}
+      {% else %}
+        <button{{ attributes.addClass(classes) }}>{{ icon }}{{ label }}</button>{{ children }}
+      {% endif %}
+    {% endif %}
+    {%
+      set classes = [
+        'btn',
+        'dropdown-toggle',
+      ]
+    %}
+    <button{{ split_button_attributes.addClass(classes) }} type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="caret"></span>
+      <span class="sr-only">{{ 'Toggle Dropdown'|t }}</span>
+    </button>
+    {{ children }}
+  {% endapply %}{% endblock %}
+

themes/bootstrap/templates/input/input--button.html.twig

@@ -0,0 +1,47 @@
+{% extends "input.html.twig" %}
+{#
+/**
+ * @file
+ * Theme suggestion for "button" input form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ * - icon: An icon.
+ * - icon_only: Flag to display only the icon and not the label.
+ * - icon_position: Where an icon should be displayed.
+ * - label: button label.
+ * - prefix: Markup to display before the input element.
+ * - suffix: Markup to display after the input element.
+ * - type: The type of input.
+ *
+ * @ingroup templates
+ *
+ * @see \Drupal\bootstrap\Plugin\Preprocess\InputButton
+ * @see \Drupal\bootstrap\Plugin\Preprocess\Input
+ * @see template_preprocess_input()
+ */
+#}
+  {% block input %}{% apply spaceless %}
+    {%
+      set classes = [
+      'btn',
+      type == 'submit' ? 'js-form-submit',
+      icon and icon_position and not icon_only ? 'icon-' ~ icon_position,
+    ]
+    %}
+    {% if icon and icon_only %}
+      <button{{ attributes.addClass(classes, 'icon-only') }}>
+        <span class="sr-only">{{ label }}</span>
+        {{ icon }}
+      </button>
+    {% else %}
+      {% if icon_position == 'after' %}
+        <button{{ attributes.addClass(classes) }}>{{ label }}{{ icon }}</button>{{ children }}
+      {% else %}
+        <button{{ attributes.addClass(classes) }}>{{ icon }}{{ label }}</button>{{ children }}
+      {% endif %}
+    {% endif %}
+    {{ children }}
+  {% endapply %}{% endblock %}
+

themes/bootstrap/templates/input/input--form-control.html.twig

@@ -0,0 +1,32 @@
+{% extends "input.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation for an 'input__textfield' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ * - icon: An icon.
+ * - input_group: Flag to display as an input group.
+ * - icon_position: Where an icon should be displayed.
+ * - prefix: Markup to display before the input element.
+ * - suffix: Markup to display after the input element.
+ * - type: The type of input.
+ *
+ * @ingroup templates
+ *
+ * @see \Drupal\bootstrap\Plugin\Preprocess\Input
+ * @see template_preprocess_input()
+ */
+#}
+
+  {% block input %}{% apply spaceless %}
+    {%
+      set classes = [
+      'form-control',
+    ]
+    %}
+    <input{{ attributes.addClass(classes) }} />
+  {% endapply %}{% endblock %}
+

themes/bootstrap/templates/input/input.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ * - icon: An icon.
+ * - input_group: Flag to display as an input group.
+ * - icon_position: Where an icon should be displayed.
+ * - prefix: Markup to display before the input element.
+ * - suffix: Markup to display after the input element.
+ * - type: The type of input.
+ *
+ * @ingroup templates
+ *
+ * @see \Drupal\bootstrap\Plugin\Preprocess\Input
+ * @see template_preprocess_input()
+ */
+#}
+{% apply spaceless %}
+  {% if input_group %}
+    <div class="input-group">
+  {% endif %}
+
+  {% if prefix %}
+    {{ prefix }}
+  {% endif %}
+
+  {% block input %}
+    <input{{ attributes }} />
+  {% endblock %}
+
+  {% if suffix %}
+    {{ suffix }}
+  {% endif %}
+
+  {% if input_group %}
+    </div>
+  {% endif %}
+
+  {{ children }}
+{% endapply %}

themes/bootstrap/templates/input/select.html.twig

@@ -0,0 +1,61 @@
+{#
+/**
+ * @file
+ * Theme override for a select element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the select tag.
+ * - input_group: Flag to display as an input group.
+ * - options: The option element children.
+ * - prefix: Markup to display before the input element.
+ * - suffix: Markup to display after the input element.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_select()
+ */
+#}
+{% apply spaceless %}
+  {% if input_group %}
+    <div class="input-group">
+  {% endif %}
+
+  {% if prefix %}
+    {{ prefix }}
+  {% endif %}
+
+  {# Browsers do not recognize pseudo :after selectors, we must create a wrapper
+   # around the select element to style it properly.
+   # @see http://stackoverflow.com/q/21103542
+   #}
+  {% if not attributes.offsetExists('multiple') %}
+    <div class="select-wrapper">
+  {% endif %}
+    {% set classes = ['form-control'] %}
+    <select{{ attributes.addClass(classes) }}>
+      {% for option in options %}
+        {% if option.type == 'optgroup' %}
+          <optgroup label="{{ option.label }}">
+            {% for sub_option in option.options %}
+              <option
+                value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
+            {% endfor %}
+          </optgroup>
+        {% elseif option.type == 'option' %}
+          <option
+            value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
+        {% endif %}
+      {% endfor %}
+    </select>
+  {% if not attributes.offsetExists('multiple') %}
+    </div>
+  {% endif %}
+
+  {% if suffix %}
+    {{ suffix }}
+  {% endif %}
+
+  {% if input_group %}
+    </div>
+  {% endif %}
+{% endapply %}

themes/bootstrap/templates/input/textarea.html.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Bootstrap theme implementation for a 'textarea' #type form element.
+ *
+ * Available variables
+ * - wrapper_attributes: A list of HTML attributes for the wrapper element.
+ * - attributes: A list of HTML attributes for the textarea element.
+ * - resizable: An indicator for whether the textarea is resizable.
+ * - required: An indicator for whether the textarea is required.
+ * - value: The textarea content.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_textarea()
+ */
+#}
+{%
+  set classes = [
+    'form-textarea',
+    'form-control',
+    resizable ? 'resize-' ~ resizable,
+    required ? 'required',
+  ]
+%}
+<div{{ wrapper_attributes.addClass('form-textarea-wrapper') }}>
+  <textarea{{ attributes.addClass(classes) }}>{{ value }}</textarea>
+</div>