Class: Fluxbit::Form::TelephoneComponent

Inherits:
TextFieldComponent
  • Object
show all
Includes:
Config::Form::TelephoneComponent
Defined in:
app/components/fluxbit/form/telephone_component.rb

Overview

The ‘Fluxbit::Form::TelephoneComponent` is a telephone input component that extends `Fluxbit::Form::TextFieldComponent`. It provides a styled telephone input with an integrated country code selector showing country flags and dialing codes. The input includes automatic masking for phone numbers.

Examples:

Basic usage

= render Fluxbit::Form::TelephoneComponent.new(name: :phone)

With default country

= render Fluxbit::Form::TelephoneComponent.new(name: :phone, default_country: "BR")

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ TelephoneComponent

Initializes the telephone component with the given properties.



22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
# File 'app/components/fluxbit/form/telephone_component.rb', line 22

def initialize(**props)
  @default_country = props.delete(:default_country) || @@default_country
  @country_field_name = props.delete(:country_field_name)
  @country_attribute = props.delete(:country)

  # Set default sizing from config if not specified
  props[:sizing] = @@default_sizing unless props.key?(:sizing)

  # Force type to tel
  props[:type] = :tel

  super(**props)

  # Override the input classes to match our custom sizing
  override_input_sizing
end

Instance Method Details

#call ⇒ Object 



39
40
41
42
43
44
45
46
47
 
# File 'app/components/fluxbit/form/telephone_component.rb', line 39

def call
  content_tag :div, **@wrapper_html do
    safe_join [
      label,
      telephone_input_container,
      help_text
    ]
  end
end