fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/form/field_component.rb

@@ -9,6 +9,7 @@ class Fluxbit::Form::FieldComponent < Fluxbit::Form::Component
     @name = @props.delete(:name) || (@attribute if @form.present?)
     @value = @props.delete(:value)
     @id = @props.delete(:id)
+    @required = @props.delete(:required)
 
     @object = @form&.object
     @help_text = define_help_text(props.delete(:help_text), @object, @attribute)
@@ -16,11 +17,12 @@ class Fluxbit::Form::FieldComponent < Fluxbit::Form::Component
     @helper_popover_placement = props.delete(:helper_popover_placement) || "right"
     @label = label_value(props.delete(:label), @object, @attribute, @id)
     @wrapper_html = props.delete(:wrapper_html) || {}
+    @wrapper_html = { class: @wrapper_html } if @wrapper_html.is_a?(String)
     define_wrapper_options
   end
 
   def define_wrapper_options
-    add(to: @wrapper_html, class: "required") if @props[:required].present?
-    add(to: @wrapper_html, class: @name) if @name.present?
+    add(to: @wrapper_html, class: "required") if @required.present?
+    add(to: @wrapper_html, class: @name.to_s) if @name.present?
   end
 end

data/app/components/fluxbit/form/help_text_component.rb

@@ -20,7 +20,7 @@ class Fluxbit::Form::HelpTextComponent < Fluxbit::Form::Component
   def initialize(color: nil, **props)
     super
     @props = props
-    color = @@color unless color.in? %i[info default success failure warning]
+    color = @@color unless color.in? styles[:colors].keys
     add class: style(color), to: @props, first_element: true
   end
 

data/app/components/fluxbit/form/label_component.rb

@@ -18,7 +18,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
   # @param helper_popover [String] Popover content shown on icon hover
   # @param helper_popover_placement [String] Placement of the popover (default: "right")
   # @param sizing [Integer] Size index for label text (default: config default)
-  # @param color [Symbol] Label color (:default, :success, :failure, :info, :warning)
+  # @param color [Symbol] Label color (:default, :success, :danger, :info, :warning)
   # @param class [String] Additional CSS classes for the label element
   # @param ... any other HTML attribute supported by the <label> tag
   def initialize(**props)
@@ -32,6 +32,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     @sizing = @props[:sizing].to_i || @@sizing
     @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
     @color = options(@props.delete(:color), collection: styles[:colors], default: @@color)
+    @required = @props.delete(:required) || false
 
     add class: styles[:colors][@color], to: @props, first_element: true
     add class: styles[:base], to: @props, first_element: true
@@ -42,7 +43,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     return "" if @helper_popover.nil?
 
     content_tag :span,
-                anyicon(icon: @@helper_popover_icon, class: @@helper_popover_icon_class),
+                anyicon(@@helper_popover_icon, class: @@helper_popover_icon_class),
                 {
                   "data-popover-placement": @helper_popover_placement,
                   "data-popover-target": target,
@@ -59,10 +60,16 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
   def call
     safe_join(
       [
-        content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
+        content_tag(:label, safe_join([ content || @with_content, span_helper_popover, required ]), @props),
         help_text,
         render_popover
       ]
     )
   end
+
+  def required
+    return "" unless @required
+
+    content_tag(:span, "*", class: styles[:required])
+  end
 end

data/app/components/fluxbit/form/password_component.rb

@@ -0,0 +1,247 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::PasswordComponent` is a password input component that extends `Fluxbit::Form::TextFieldComponent`.
+# It provides a password field with a toggleable visibility icon (eye/eye-slash) and optional password strength indicators.
+# The component can display validation checks for password requirements such as length, letters, capital letters, numbers, and special characters.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::PasswordComponent.new(name: :password)
+#
+# @example With password strength checks
+#   = render Fluxbit::Form::PasswordComponent.new(name: :password, show_strength: true)
+#
+# @example Custom requirements
+#   = render Fluxbit::Form::PasswordComponent.new(
+#     name: :password,
+#     show_strength: true,
+#     min_length: 12,
+#     require_uppercase: true,
+#     require_lowercase: true,
+#     require_numbers: true,
+#     require_special: true
+#   )
+#
+# @see docs/03_Forms/Password.md For detailed documentation and examples.
+class Fluxbit::Form::PasswordComponent < Fluxbit::Form::TextFieldComponent
+  # Initializes the password field component with the given properties.
+  #
+  # @param form [ActionView::Helpers::FormBuilder] The form builder (optional, for Rails forms)
+  # @param attribute [Symbol] The model attribute to be used in the form (required if using form builder)
+  # @param show_strength [Boolean] Whether to display password strength indicators (default: false)
+  # @param min_length [Integer] Minimum password length requirement (default: 8)
+  # @param require_uppercase [Boolean] Require at least one uppercase letter (default: true)
+  # @param require_lowercase [Boolean] Require at least one lowercase letter (default: true)
+  # @param require_numbers [Boolean] Require at least one number (default: true)
+  # @param require_special [Boolean] Require at least one special character (default: false)
+  # @param strength_labels [Hash] Custom labels for strength checks
+  # @param ... any other options supported by TextFieldComponent
+  def initialize(**props)
+    @show_strength = props.delete(:show_strength) || false
+    @min_length = props.delete(:min_length) || 8
+
+    # Get boolean values, defaulting to true for uppercase/lowercase/numbers, false for special
+    uppercase_val = props.delete(:require_uppercase)
+    @require_uppercase = uppercase_val.nil? ? true : uppercase_val
+
+    lowercase_val = props.delete(:require_lowercase)
+    @require_lowercase = lowercase_val.nil? ? true : lowercase_val
+
+    numbers_val = props.delete(:require_numbers)
+    @require_numbers = numbers_val.nil? ? true : numbers_val
+
+    @require_special = props.delete(:require_special) || false
+    @strength_labels = props.delete(:strength_labels) || default_strength_labels
+
+    # Force type to password and add eye icon for visibility toggle
+    props[:type] = :password
+    props[:right_icon] ||= :"heroicons_outline:eye"
+
+    # Add data attributes for Stimulus controller
+    props[:data] ||= {}
+    # props[:data][:controller] = add_controller(props[:data][:controller], "fx-password")
+    props[:data][:action] = add_action(props[:data][:action], "input->fx-password#validate")
+
+    # Store right_icon_html for later use in create_right_icon
+    @password_right_icon_html = props.delete(:right_icon_html) || {}
+
+    # Set up wrapper_html with controller before calling super
+    props[:wrapper_html] ||= {}
+    props[:wrapper_html][:data] ||= {}
+    props[:wrapper_html][:data][:controller] = "fx-password"
+    props[:wrapper_html][:data].merge!(
+      {
+        "fx-password-target": "inputWrapper",
+        "fx-password-min-length-value": @min_length,
+        "fx-password-require-uppercase-value": @require_uppercase,
+        "fx-password-require-lowercase-value": @require_lowercase,
+        "fx-password-require-numbers-value": @require_numbers,
+        "fx-password-require-special-value": @require_special
+      }
+    )
+
+
+    super(**props)
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [
+        label,
+        icon_container_wrapper,
+        help_text,
+        (@show_strength ? strength_indicator : nil)
+      ].compact
+    end
+  end
+
+  private
+
+  def password_styles
+    @password_styles ||= {
+      strength_wrapper: "mt-2 space-y-2",
+      strength_bar_wrapper: "space-y-1",
+      strength_bar_label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+      strength_bar_container: "w-full bg-slate-200 rounded-full h-2 dark:bg-slate-700",
+      strength_bar: "h-2 rounded-full transition-all duration-300 bg-slate-300 dark:bg-slate-600",
+      checks_list: "space-y-1",
+      check_item: "flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400",
+      check_icon: "flex-shrink-0 text-red-500 dark:text-red-400",
+      check_label: ""
+    }
+  end
+
+  def icon_container_wrapper
+    content_tag :div,
+      data: {
+        "fx-password-target": "inputWrapper",
+        "fx-password-min-length-value": @min_length,
+        "fx-password-require-uppercase-value": @require_uppercase,
+        "fx-password-require-lowercase-value": @require_lowercase,
+        "fx-password-require-numbers-value": @require_numbers,
+        "fx-password-require-special-value": @require_special
+      } do
+      icon_container
+    end
+  end
+
+  def default_strength_labels
+    {
+      length: I18n.t("fluxbit.form.password.checks.length", default: "At least %{count} characters", count: @min_length),
+      uppercase: I18n.t("fluxbit.form.password.checks.uppercase", default: "Contains uppercase letter"),
+      lowercase: I18n.t("fluxbit.form.password.checks.lowercase", default: "Contains lowercase letter"),
+      numbers: I18n.t("fluxbit.form.password.checks.numbers", default: "Contains number"),
+      special: I18n.t("fluxbit.form.password.checks.special", default: "Contains special character"),
+      strength: I18n.t("fluxbit.form.password.strength", default: "Password strength")
+    }
+  end
+
+  def strength_indicator
+    content_tag :div, class: password_styles[:strength_wrapper], data: { "fx-password-target": "strengthIndicator" } do
+      safe_join [
+        strength_bar,
+        strength_checks
+      ]
+    end
+  end
+
+  def strength_bar
+    content_tag :div, class: password_styles[:strength_bar_wrapper] do
+      safe_join([
+        content_tag(:div, class: password_styles[:strength_bar_label]) do
+          content_tag :span, @strength_labels[:strength]
+        end,
+        content_tag(:div, class: password_styles[:strength_bar_container]) do
+          content_tag :div,
+            "",
+            class: password_styles[:strength_bar],
+            data: { "fx-password-target": "strengthBar" }
+        end
+      ])
+    end
+  end
+
+  def strength_checks
+    content_tag :ul, class: password_styles[:checks_list] do
+      safe_join [
+        strength_check(:length, @strength_labels[:length]),
+        (@require_lowercase ? strength_check(:lowercase, @strength_labels[:lowercase]) : nil),
+        (@require_uppercase ? strength_check(:uppercase, @strength_labels[:uppercase]) : nil),
+        (@require_numbers ? strength_check(:numbers, @strength_labels[:numbers]) : nil),
+        (@require_special ? strength_check(:special, @strength_labels[:special]) : nil)
+      ].compact
+    end
+  end
+
+  def strength_check(type, label)
+    content_tag :li,
+      class: password_styles[:check_item],
+      data: { "fx-password-target": "check#{type.to_s.capitalize}" } do
+      safe_join([
+        # Icon container with both check and X icons
+        content_tag(:span, class: password_styles[:check_icon]) do
+          safe_join([
+            # X icon (visible by default - password requirement not met)
+            content_tag(:span,
+              data: { "fx-password-target": "check#{type.to_s.capitalize}Fail" }
+            ) do
+              anyicon(:"heroicons_solid:x-circle", class: "size-4")
+            end,
+            # Check icon (hidden by default - password requirement met)
+            content_tag(:span,
+              class: "hidden",
+              data: { "fx-password-target": "check#{type.to_s.capitalize}Pass" }
+            ) do
+              anyicon(:"heroicons_solid:check-circle", class: "size-4")
+            end
+          ])
+        end,
+        content_tag(:span, label, class: password_styles[:check_label])
+      ])
+    end
+  end
+
+  def add_controller(existing, new_controller)
+    existing ? "#{existing} #{new_controller}" : new_controller
+  end
+
+  def add_action(existing, new_action)
+    existing ? "#{existing} #{new_action}" : new_action
+  end
+
+  def add_class(existing, new_class)
+    existing ? "#{existing} #{new_class}" : new_class
+  end
+
+  # Override to render both eye icons with toggle visibility
+  def create_right_icon
+    return "" if @right_icon.nil?
+
+    # Build wrapper attributes
+    wrapper_attrs = {
+      class: add_class(@password_right_icon_html[:class], "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"),
+      onclick: "", # Prevent pointer-events-none
+      data: {
+        action: "click->fx-password#toggleVisibility"
+      }
+    }
+
+    content_tag :div, **wrapper_attrs do
+      safe_join([
+        # Eye icon (visible by default)
+        content_tag(:div,
+          class: "#{styles[:additional_icons][:class][@color]}",
+          data: { "fx-password-target": "eyeIcon" }
+        ) do
+          eye_icon
+        end,
+        # Eye-slash icon (hidden by default)
+        content_tag(:div,
+          class: "#{styles[:additional_icons][:class][@color]} hidden",
+          data: { "fx-password-target": "eyeSlashIcon" }
+        ) do
+          eye_slash_icon
+        end
+      ])
+    end
+  end
+end

data/app/components/fluxbit/form/radio_group_button_component.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::Form::RadioGroupButtonComponent` is a component for rendering radio buttons
+# styled as a button group. It provides the visual appearance of grouped buttons while
+# maintaining radio button behavior (only one option can be selected at a time).
+#
+# This component is useful for creating segmented controls, view toggles, or any interface
+# where users need to select one option from a group with a button-like appearance.
+class Fluxbit::Form::RadioGroupButtonComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::RadioGroupButtonComponent
+
+  renders_many :radio_options, lambda { |**props, &block|
+    @options_group << ComponentObj.new(props, view_context.capture(&block))
+  }
+
+  ##
+  # Initializes the radio group button component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the radio group button.
+  # @option props [String] :name (nil) The name attribute for the radio button group (required for proper radio functionality).
+  # @option props [Symbol, String] :color (:default) The color style of the buttons.
+  # @option props [Symbol, String] :size (1) The size of the buttons (e.g., `0` to `4`).
+  # @option props [Boolean] :pill (false) Determines if the buttons have pill-shaped edges.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the group container.
+  #
+  # @return [Fluxbit::Form::RadioGroupButtonComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @name = @props.delete(:name) || "radio_group_#{fx_id}"
+    @color = options (@props.delete(:color) || "").to_sym, collection: button_styles[:colors].keys, default: @@color
+    @size = @props.delete(:size) || @@size
+    @pill = options @props.delete(:pill), default: false
+    @outline = @color.to_s.end_with?("_outline")
+    @options_group = []
+
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:group], to: @props, first_element: true
+  end
+
+  def call
+    radio_options
+    tag.div(**@props) do
+      @options_group.each_with_index do |option, index|
+        concat render_radio_button(option, index)
+      end
+    end
+  end
+
+  private
+
+  def render_radio_button(option, index)
+    option_props = option.props || {}
+    option_content = option.content
+    option_value = option_props.delete(:value) || index
+    option_checked = option_props.delete(:checked) || false
+    option_disabled = option_props.delete(:disabled) || false
+
+    radio_id = "#{@name}_#{option_value}_#{fx_id}"
+
+    # Input element
+    input_html = {
+      type: "radio",
+      id: radio_id,
+      name: @name,
+      value: option_value,
+      class: "#{Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:input]} peer"
+    }
+    input_html[:checked] = true if option_checked
+    input_html[:disabled] = true if option_disabled
+
+    # Label element (styled as button)
+    label_html = option_props.dup
+    label_html[:for] = radio_id
+
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:base], to: label_html, first_element: true
+    add class: button_color_classes, to: label_html, first_element: true
+    add class: button_size_classes, to: label_html, first_element: true
+    add class: button_pill_classes, to: label_html, first_element: true
+    add class: button_outline_classes, to: label_html, first_element: true
+
+    # Position classes
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:start], to: label_html if index == 0
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:end], to: label_html if index == @options_group.size - 1
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:middle], to: label_html if index > 0 && index < @options_group.size - 1
+
+    # Selected state - use peer-checked for CSS-only interaction
+    # The peer modifier allows the label to change when the radio input is checked
+    add class: "peer-checked:brightness-90 dark:peer-checked:brightness-75", to: label_html
+
+    # Disabled state
+    if option_disabled
+      add class: Fluxbit::Config::ButtonComponent.styles[:disabled], to: label_html, first_element: true
+    end
+
+    tag.div(class: "relative") do
+      concat tag.input(**input_html)
+      concat tag.label(option_content, **label_html)
+    end
+  end
+
+  def button_styles
+    Fluxbit::Config::ButtonComponent.styles
+  end
+
+  def button_color_classes
+    @color.in?(button_styles[:colors].keys) ? button_styles[:colors][@color] : button_styles[:colors][:default]
+  end
+
+  def button_size_classes
+    button_styles[:size][@size.to_i]
+  end
+
+  def button_pill_classes
+    return "" if @outline
+    button_styles[:pill][@pill ? :on : :off]
+  end
+
+  def button_outline_classes
+    if @outline
+      "#{button_styles[:outline][:on]} #{button_styles[:outline][:pill][@pill ? :on : :off]}"
+    else
+      button_styles[:outline][:off]
+    end
+  end
+end

data/app/components/fluxbit/form/select_component.rb

@@ -12,14 +12,22 @@ class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
   # Initializes the select component with the given properties.
   #
   # @param name [String] Name of the field (required unless using form builder)
-  # @param label [String] Label for the input (optional)
+  # @param label [String, false] Label text for the select field (optional, auto-generated from attribute if using form builder)
+  # @param help_text [String, Array, false] Help text displayed below the field (optional, supports i18n)
+  # @param helper_popover [String, false] Content for an info popover next to the label (optional, supports i18n)
+  # @param helper_popover_placement [String] Placement of the popover: "top", "right", "bottom", "left" (default: "right")
   # @param value [String] Value for the field (optional)
   # @param grouped [Boolean] Enables grouped select options (default: false)
   # @param time_zone [Boolean] Uses Rails time zone select options (default: false)
   # @param select_options [Hash] Options for select tag (prompt, selected, disabled, etc)
   # @param choices [Array] List of choices for options (alternative to options)
-  # @param options [Array, Hash] List or hash of options (or groups if grouped)
-  # @param help_text [String] Helper or error text below the field
+  # @param options [Array, Hash, String] List or hash of options, or pre-formatted HTML from options_for_select
+  # @param prompt [String, Boolean, false] Prompt text, true to use default, or false to disable (optional, defaults to I18n if object/attribute present)
+  # @param include_blank [String, Boolean] Include blank option (optional)
+  # @param selected [Object] Pre-selected value (optional)
+  # @param disabled [Array, Object] Disabled options (optional)
+  # @param color [Symbol] Color state: :default, :success, :danger, :warning, :info (optional)
+  # @param sizing [Integer] Field size (0 to 2, default: 1)
   # @param class [String] Additional CSS classes for the select element
   # @param ... any other HTML attribute supported by <select>
   def initialize(**props)
@@ -29,18 +37,38 @@ class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
     @select_options = @props.delete(:select_options) || {}
     @choices = @props.delete(:choices) || nil
     @options = @props.delete(:options) || {}
+
+    # Extract select-specific options
+    prompt_value = @select_options.delete(:prompt) || @props.delete(:prompt)
+    @include_blank = @select_options.delete(:include_blank) || @props.delete(:include_blank)
+    @selected = @select_options.delete(:selected) || @props.delete(:selected)
+    @disabled_options = @select_options.delete(:disabled) || @props.delete(:disabled)
+
     @options = ::ActiveSupport::TimeZone.all if @time_zone
+
+    # Define prompt with I18n support
+    define_prompt(prompt_value)
   end
 
   def input
     if @form.present? && @attribute.present?
-      @form.select(
-        @attribute,
-        build_options_for_select,
-        @select_options,
-        @props
-      )
+      # form.select(attribute, choices, options = {}, html_options = {})
+      # For form builder with time zones, use the specialized helper
+      if @time_zone
+        @form.time_zone_select(@attribute, nil, build_select_options_hash, @props)
+      else
+        # form.select can accept raw choices OR pre-formatted option tags
+        # We use pre-formatted tags for consistency with grouped selects
+        @form.select(
+          @attribute,
+          build_options_for_select,
+          build_select_options_hash,
+          @props
+        )
+      end
     else
+      # select_tag(name, option_tags = nil, options = {})
+      # option_tags should be pre-formatted HTML
       select_tag(
         @name,
         build_options_for_select,
@@ -49,13 +77,38 @@ class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
     end
   end
 
+  # Build options hash for form.select (prompt, include_blank, etc.)
+  # Note: Don't include selected/disabled if options are pre-formatted HTML
+  def build_select_options_hash
+    options_hash = @select_options.dup
+    options_hash[:prompt] = @prompt if @prompt
+    options_hash[:include_blank] = @include_blank if @include_blank
+
+    # Only add selected/disabled if we're building options from raw data
+    unless options_are_preformatted?
+      options_hash[:selected] = @selected if @selected
+      options_hash[:disabled] = @disabled_options if @disabled_options
+    end
+
+    options_hash
+  end
+
+  # Build pre-formatted option tags for select_tag and form.select
   def build_options_for_select
-    if @grouped
+    # If options are already HTML (from options_for_select/grouped_options_for_select), use as-is
+    if options_are_preformatted?
+      html = @options.dup
+      # Add prompt if needed and not already in the HTML (only for select_tag)
+      html = add_prompt_to_html(html) if @prompt && !html.include?(@prompt.to_s) && !using_form_builder?
+      return html
+    end
+
+    # Otherwise, build the HTML from raw data
+    html = if @grouped
       grouped_options_for_select(
         @options,
         @selected,
         disabled: @disabled_options,
-        prompt: @prompt,
         divider: @divider
       )
     elsif @time_zone
@@ -63,10 +116,54 @@ class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
     else
       options_for_select(@options, selected: @selected, disabled: @disabled_options)
     end
+
+    # Add prompt option at the beginning if specified
+    # Only add it manually for select_tag (form.select handles it via options hash)
+    html = add_prompt_to_html(html) if @prompt && !using_form_builder?
+    html
   end
 
   private
 
+  # Check if we're using a form builder
+  def using_form_builder?
+    @form.present? && @attribute.present?
+  end
+
+  def define_prompt(prompt)
+    # If prompt is explicitly false, don't set it
+    return if prompt.is_a?(FalseClass)
+
+    # If prompt is explicitly provided (string or true), use it
+    if prompt.present?
+      @prompt = prompt
+      return
+    end
+
+    # If no prompt provided and we have an object and attribute, try I18n lookup
+    if prompt.nil? && @object.present? && @attribute.present?
+      i18n_prompt = I18n.t(
+        @attribute,
+        scope: [ @object.class.name.pluralize.underscore.to_sym, :prompts ],
+        default: nil
+      )
+      @prompt = i18n_prompt if i18n_prompt.present?
+    end
+  end
+
+  # Check if options are already pre-formatted HTML
+  # Pre-formatted options are strings containing HTML tags
+  def options_are_preformatted?
+    @options.is_a?(String) && @options.include?("<option")
+  end
+
+  # Add prompt option to the beginning of the HTML options
+  def add_prompt_to_html(html)
+    prompt_text = @prompt.is_a?(String) ? @prompt : "Please select"
+    prompt_option = "<option value=\"\">#{ERB::Util.html_escape(prompt_text)}</option>".html_safe
+    prompt_option + html
+  end
+
   def grouped_selected_option
     @options.each do |group|
       group_to_traverse = @divider ? group[1] : group