Added PasswordInput Page

explorer/src/Main.elm

@@ -2,11 +2,13 @@ module Main exposing (main)
 
 import Element
 import Pages.Button
+import Pages.PasswordInput
 import UIExplorer
 
 
 pages =
     UIExplorer.firstPage "Button" Pages.Button.page
+        |> UIExplorer.nextPage "Password Input" Pages.PasswordInput.page
 
 
 main =

explorer/src/Pages/PasswordInput.elm

@@ -0,0 +1,173 @@
+module Pages.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
+
+import Browser
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Font
+import Element.Input as Input
+import Material.Icons as MaterialIcons exposing (offline_bolt)
+import Material.Icons.Types exposing (Coloring(..))
+import Set exposing (Set)
+import UIExplorer
+import UIExplorer.Story as Story
+import UIExplorer.Tile as Tile
+import Widget exposing (ColumnStyle, PasswordInputStyle)
+import Widget.Customize as Customize
+import Widget.Icon as Icon exposing (Icon)
+import Widget.Material as Material
+    exposing
+        ( Palette
+        , containedButton
+        , darkPalette
+        , defaultPalette
+        , outlinedButton
+        , textButton
+        )
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+
+
+page =
+    Tile.first (intro |> Tile.withTitle "Password Input")
+        |> Tile.nextGroup book
+        |> Tile.next demo
+        |> Tile.page
+
+
+intro =
+    Tile.markdown []
+        """ An input field for a password. """
+
+
+book =
+    Story.book (Just "options")
+        (Story.initStaticTiles
+            |> Story.addTile viewPassword
+        )
+        |> Story.addStory
+            (Story.optionListStory "Palette"
+                darkPalette
+                [ ( "dark", darkPalette )
+                , ( "default", defaultPalette )
+                ]
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "123456789"
+            )
+        |> Story.addStory
+            (Story.optionListStory "Placeholder"
+                Nothing
+                [ ( "Yes"
+                  , "password"
+                        |> Element.text
+                        |> Input.placeholder []
+                        |> Just
+                  )
+                , ( "No", Nothing )
+                ]
+            )
+        |> Story.addStory
+            (Story.textStory "Label"
+                "Password"
+            )
+        |> Story.build
+
+
+type alias Style style msg =
+    { style
+        | passwordInput : PasswordInputStyle msg
+        , column : ColumnStyle msg
+    }
+
+
+viewLabel : String -> Element msg
+viewLabel =
+    Element.el [ Element.width <| Element.px 250 ] << Element.text
+
+
+viewPassword palette text placeholder label _ _ =
+    { title = Nothing
+    , position = Tile.LeftColumnTile
+    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
+    , body =
+        Element.column
+            [ Element.width Element.fill
+            , Element.centerY
+            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
+            ]
+            [ viewLabel "Current Password"
+            , { text = text
+              , placeholder = placeholder
+              , label = label
+              , onChange = always ()
+              , show = False
+              }
+                |> Widget.currentPasswordInput (Material.passwordInput palette)
+            ]
+    }
+
+
+
+--------------------------------------------------------------------------------
+-- Example
+--------------------------------------------------------------------------------
+
+
+materialStyle : Style {} msg
+materialStyle =
+    { passwordInput = Material.passwordInput Material.defaultPalette
+    , column = Material.column
+    }
+
+
+type alias Model =
+    { passwordInput : String
+    }
+
+
+type Msg
+    = SetPasswordInput String
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { passwordInput = ""
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        SetPasswordInput string ->
+            ( { model | passwordInput = string }, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view _ model =
+    { title = Just "Interactive Demo"
+    , position = Tile.FullWidthTile
+    , attributes = []
+    , body =
+        { text = model.passwordInput
+        , placeholder = Nothing
+        , label = "Chips"
+        , onChange = SetPasswordInput
+        , show = False
+        }
+            |> Widget.currentPasswordInput (Material.passwordInput Material.defaultPalette)
+    }
+
+
+demo =
+    { init = always init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }

explorer/src/Pages/Switch.elm

@@ -0,0 +1,71 @@
+module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
+
+import Browser
+import Element exposing (Element)
+import Widget exposing (SwitchStyle)
+import Widget.Material as Material
+
+
+type alias Style style msg =
+    { style
+        | switch : SwitchStyle msg
+    }
+
+
+materialStyle : Style {} msg
+materialStyle =
+    { switch = Material.switch Material.defaultPalette
+    }
+
+
+type Model
+    = IsButtonEnabled Bool
+
+
+type Msg
+    = ToggledButtonStatus
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsButtonEnabled False
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg (IsButtonEnabled buttonEnabled) =
+    case msg of
+        ToggledButtonStatus ->
+            ( IsButtonEnabled <| not buttonEnabled
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style (IsButtonEnabled isButtonEnabled) =
+    Widget.switch style.switch
+        { description = "click me"
+        , active = isButtonEnabled
+        , onPress =
+            ToggledButtonStatus
+                |> msgMapper
+                |> Just
+        }
+
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = \model -> model |> view identity materialStyle |> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }

explorer/src/Pages/Tab.elm

@@ -0,0 +1,93 @@
+module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
+
+import Browser
+import Element exposing (Element)
+import Widget exposing (TabStyle)
+import Widget.Material as Material
+
+
+type alias Style style msg =
+    { style
+        | tab : TabStyle msg
+    }
+
+
+materialStyle : Style {} msg
+materialStyle =
+    { tab = Material.tab Material.defaultPalette
+    }
+
+
+type Model
+    = Selected (Maybe Int)
+
+
+type Msg
+    = ChangedTab Int
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( Selected Nothing
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        ChangedTab int ->
+            ( Selected <| Just int
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style (Selected selected) =
+    Widget.tab style.tab
+        { tabs =
+            { selected = selected
+            , options =
+                [ 1, 2, 3 ]
+                    |> List.map
+                        (\int ->
+                            { text = "Tab " ++ (int |> String.fromInt)
+                            , icon = always Element.none
+                            }
+                        )
+            , onSelect = ChangedTab >> msgMapper >> Just
+            }
+        , content =
+            \s ->
+                (case s of
+                    Just 0 ->
+                        "This is Tab 1"
+
+                    Just 1 ->
+                        "This is the second tab"
+
+                    Just 2 ->
+                        "The thrid and last tab"
+
+                    _ ->
+                        "Please select a tab"
+                )
+                    |> Element.text
+        }
+
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = \model -> model |> view identity materialStyle |> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }

explorer/src/Pages/TextInput.elm

@@ -0,0 +1,122 @@
+module Example.TextInput exposing (Model, Msg, init, subscriptions, update, view)
+
+import Browser
+import Element exposing (Element)
+import Set exposing (Set)
+import Widget exposing (ColumnStyle, TextInputStyle)
+import Widget.Material as Material
+
+
+type alias Style style msg =
+    { style
+        | textInput : TextInputStyle msg
+        , column : ColumnStyle msg
+    }
+
+
+materialStyle : Style {} msg
+materialStyle =
+    { textInput = Material.textInput Material.defaultPalette
+    , column = Material.column
+    }
+
+
+type alias Model =
+    { chipTextInput : Set String
+    , textInput : String
+    }
+
+
+type Msg
+    = ToggleTextInputChip String
+    | SetTextInput String
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { chipTextInput = Set.empty
+      , textInput = ""
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        ToggleTextInputChip string ->
+            ( { model
+                | chipTextInput =
+                    model.chipTextInput
+                        |> (if model.chipTextInput |> Set.member string then
+                                Set.remove string
+
+                            else
+                                Set.insert string
+                           )
+              }
+            , Cmd.none
+            )
+
+        SetTextInput string ->
+            ( { model | textInput = string }, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view : (Msg -> msg) -> Style style msg -> Model -> Element msg
+view msgMapper style model =
+    [ { chips =
+            model.chipTextInput
+                |> Set.toList
+                |> List.map
+                    (\string ->
+                        { icon = always Element.none
+                        , text = string
+                        , onPress =
+                            string
+                                |> ToggleTextInputChip
+                                |> msgMapper
+                                |> Just
+                        }
+                    )
+      , text = model.textInput
+      , placeholder = Nothing
+      , label = "Chips"
+      , onChange = SetTextInput >> msgMapper
+      }
+        |> Widget.textInput style.textInput
+    , model.chipTextInput
+        |> Set.diff
+            ([ "A", "B", "C" ]
+                |> Set.fromList
+            )
+        |> Set.toList
+        |> List.map
+            (\string ->
+                Widget.button style.textInput.content.chips.content
+                    { onPress =
+                        string
+                            |> ToggleTextInputChip
+                            |> msgMapper
+                            |> Just
+                    , text = string
+                    , icon = always Element.none
+                    }
+            )
+        |> Element.wrappedRow [ Element.spacing 10 ]
+    ]
+        |> Widget.column style.column
+
+
+main : Program () Model Msg
+main =
+    Browser.element
+        { init = always init
+        , view = \model -> model |> view identity materialStyle |> Element.layout []
+        , update = update
+        , subscriptions = subscriptions
+        }