AvardaUi.PhoneSelectInput

This module provides a component that combines a Select for country dialing codes with an Input for entering a phone number. It uses the builder pattern:

Start with new to create a base input.
Chain configuration functions like withPlaceholder or withIsRequired.
Finish with view to render it.

Creating a PhoneSelectInput

type Model

Model type for the Select component. Use this in your own model.

type alias DashboardModel =
    { phoneSelectInputModel : AvardaUi.PhoneSelectInput.Model }

init : String -> Model

Initialize the PhoneSelectInput model.

init : DashboardModel
init =
    { phoneSelectInputModel = AvardaUi.PhoneSelectInput.init "phone" }

type Msg

Msg type for the PhoneSelectInput component. Use this for the wrap msg in your own Msg type.

type DashboardMsg
    = HandlePhoneSelectInput AvardaUi.PhoneSelectInput.Msg
    | NoUpdate

update : (Msg -> msg) -> Msg -> Model -> ( Model, Cmd msg )

Update function for the PhoneSelectInput component. Call this in your update function to handle Select's internal messages

update : Model -> Msg -> ( Model, Cmd Msg )
update model msg =
    case msg of
        HandlePhoneSelectInput phoneSelectInputMsg ->
            let
                ( updatedPhoneSelectInputModel, phoneSelectInputCmd ) =
                    AvardaUi.PhoneSelectInput.update
                        HandlePhoneSelectInput
                        phoneSelectInputMsg
                        model.phoneSelectInputModel
            in
            ( { model | phoneSelectInputModel = updatedPhoneSelectInputModel }, phoneSelectInputCmd )

new :

{ inputLabel : String

, selectAriaLabel : String

, phoneSelectInputModel : Model

}

-> PhoneSelectInput msg

Create a new PhoneSelectInput component.

AvardaUi.PhoneSelectInput.new
    { inputLabel = "Phone"
    , selectAriaLabel = "Country code"
    , phoneSelectInputModel = model.phoneSelectInputModel
    }

view : (Msg -> msg) -> PhoneSelectInput msg -> Html msg

Render the PhoneSelectInput as HTML .

Always call this after you've built up the input with new and chained settings.

AvardaUi.PhoneSelectInput.new "phone" {...}
    |> AvardaUi.PhoneSelectInput.withIsRequired True
    |> AvardaUi.PhoneSelectInput.view

Update with extra options

You can pass extra options / callbacks to this component using updateWith

updateWith :

List (UpdateOption msg)

-> (Msg -> msg)

-> Msg

-> Model

-> ( Model, Cmd msg )

update : Model -> Msg -> ( Model, Cmd Msg )
update model msg =
    case msg of
        HandlePhoneSelectInput phoneSelectInputMsg ->
            let
                ( updatedPhoneSelectInputModel, phoneSelectInputCmd ) =
                    AvardaUi.PhoneSelectInput.updateWith
                        [ AvardaUi.PhoneSelectInput.onSelect OnSelect
                        , AvardaUi.PhoneSelectInput.onInput OnInput
                        ]
                        HandlePhoneSelectInput
                        phoneSelectInputMsg
                        model.phoneSelectInputModel
            in
            ( { model | phoneSelectInputModel = updatedPhoneSelectInputModel }, selectCmd )

onSelect : (CountryCode -> msg) -> UpdateOption msg

Used for triggering a message when an CountryCode is selected.

onInput : (String -> msg) -> UpdateOption msg

Used for triggering a message when the phone input is typed into.

onInputTabKeyDown : msg -> UpdateOption msg

Used for triggering a message when Tab is pressed in the input.

scrollOptionIntoView : ScrollOptionIntoViewCmd msg -> UpdateOption msg

Used to fix issue with scrolling option into view when used in ShadowDOM. elm/browser cannot find the element ID when this component is used by an app which uses ShadowDOM

type alias ScrollOptionIntoViewCmd msg =
    String -> Cmd msg

Configuration

withBorderRadius : Float -> PhoneSelectInput msg -> PhoneSelectInput msg

Adjust the border radius of the PhoneSelectInput.

withHint : String -> PhoneSelectInput msg -> PhoneSelectInput msg

Add a hint text below the PhoneSelectInput.

withInputMaxLength : Int -> PhoneSelectInput msg -> PhoneSelectInput msg

Limit the maximum number of characters.

withInputPlaceholder : String -> PhoneSelectInput msg -> PhoneSelectInput msg

Add a placeholder to the input.

withIsDisabled : Bool -> PhoneSelectInput msg -> PhoneSelectInput msg

Disable the PhoneSelectInput

withIsRequired : Bool -> PhoneSelectInput msg -> PhoneSelectInput msg

Mark the PhoneSelectInput as required.

withMaybeError : Maybe String -> PhoneSelectInput msg -> PhoneSelectInput msg

Show an error message and mark the PhoneSelectInput as invalid. Replaces any active hint text.

withMenuMaxHeight : Int -> PhoneSelectInput msg -> PhoneSelectInput msg

Set a maximum height for the dropdown menu.

withInputFloatingLabelBackgroundColor : Color -> PhoneSelectInput msg -> PhoneSelectInput msg

Sets the background color of the floating input label. This is useful when the color of the background behind the input is something else then #FFFFFF.