diff --git a/README.md b/README.md index 265f7b0..e2df791 100644 --- a/README.md +++ b/README.md @@ -2,25 +2,33 @@ This package contains **independent** widgets (no components) written for [Elm-Ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/). These widgets have no dependencies to other parts of this package. So you can just use as much as you need. -* It also supports custom themes and has a material design theme already ready to use. * [Examples of all widgets can be found here](https://orasund.github.io/elm-ui-widgets/3.0.0/). -* It is highly customizable. Checkout [Widget.Customize](https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/Widget-Customize) for more information. +* It has a [Material Design Theme](/Widget-Material) ready to use. Additionally it also supports custom themes. +* It is highly customizable. Checkout [Widget.Customize](/Widget-Customize) for more information. Feel free to start an [issue on the repository](https://github.com/Orasund/elm-ui-widgets/issues) if you have any questions. -![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png) +[![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)](https://orasund.github.io/elm-ui-widgets/3.0.0/) -## Summary +## Table of Contents -* Each widget comes with a _Widget Type_ and a _Style Type_. The Widget Type is an abstract representation of the widget and the Style Type has all styling attributes. -* Widget Types can be used as building Blocks for more complicated Widgets - (Button -> Select Buttons -> Menu -> Layout) +* [Example](#example) + * [Style Type](#style-type) + * [Styles](#styles) +* [Reusable Views vs. Components](#reusable-views-vs-components) +* [Alternatives](#alternatives) +* [Motivation](#motivation) +* [Changelog](#changelog) ## Example -Let's look at the button widget. +Each widget comes with a _Widget Type_ and a _Style Type_. +* The Widget Type is an abstract representation of the widget. They can be used as building Blocks for more complicated Widgets. +* Style Type has all styling attributes (similar to Element.Attribute). -** Style Type** +As example, consider the button widget. + +### Style Type ```elm button: ButtonStyle msg @@ -32,10 +40,10 @@ button: ButtonStyle msg -> Element msg ``` -In comparison to Elm-Ui's button, we see that `List (Attribute msg)` has changed into a _Style Type_. Furthermore, the Style type mirrors the implementation. `element` corresponds to `Element.element`, `elementRow` corresponds to `Element.row` and so on. +In comparison to Elm-Ui's button, we see that `List (Attribute msg)` has changed into a _Style Type_. If we look into the Style type, we see that it mirrors the implementation. ``` type alias ButtonStyle msg = - { element : List (Attribute msg) + { elementButton : List (Attribute msg) , ifDisabled : List (Attribute msg) , ifActive : List (Attribute msg) , otherwise : List (Attribute msg) @@ -50,40 +58,50 @@ In comparison to Elm-Ui's button, we see that `List (Attribute msg)` has change } ``` -** Style Implementation ** + So the resulting Elm-Ui code looks like this: + + ``` + button style { onPress, text, icon } = + Input.button + (style.elementButton + ++ (if onPress == Nothing then + style.ifDisabled + + else + style.otherwise + ) + ) + { onPress = onPress + , label = + Element.row style.content.elementRow + [ icon + (if onPress == Nothing then + style.content.content.icon.ifDisabled + + else + style.content.content.icon.otherwise + ) + , Element.text text |> Element.el style.content.content.text.contentText + ] + } + ``` + +### Styles For actually displaying the button we have a few different implementations: ``` elm -{-| Button with only an icon and no text -} -iconButton : - ButtonStyle msg - -> - { text : String --for screen readers - , icon : Icon - , onPress : Maybe msg - } - -> Element msg +containedButton : Palette -> ButtonStyle msg +containedButton = + Button.containedButton -{-| Button with a text but no icon -} -textButton : - ButtonStyle msg - -> - { textButton - | text : String - , onPress : Maybe msg - } - -> Element msg +outlinedButton : Palette -> ButtonStyle msg +outlinedButton = + Button.outlinedButton -{-| Button with both icon and text -} -button : - ButtonStyle msg - -> - { text : String - , icon : Icon - , onPress : Maybe msg - } - -> Element msg +textButton : Palette -> ButtonStyle msg +textButton = + Button.textButton ``` ** Widget Type ** @@ -126,7 +144,7 @@ Checkout the examples in [Widget](https://package.elm-lang.org/packages/Orasund/ ## Reusable Views vs. Components In Elm we like to use reusable views instead of components. -At first this packages had a few components, but they where more complicated in comparison. They got slowly turned into reusable views one by one. Most could be reduced even further into _view functions_: Reusable views without a model. All function in [Widget](https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/Widget) are view functions. +At first this packages had a few components, but they where more complicated in comparison. They got slowly turned into reusable views one by one. Most have been reduced even further into _view functions_: Reusable views without a model. All function in [Widget](https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/Widget) are view functions. ## Alternatives diff --git a/docs.json b/docs.json index d41addb..316c776 100644 --- a/docs.json +++ b/docs.json @@ -1 +1 @@ -[{"name":"Widget","comment":" This module contains different stateless view functions. No wiring required.\n\nThese widgets should be used by defining the styling seperately:\n\n Widget.button Material.primaryButton\n { text = \"disable me\"\n , icon =\n FeatherIcons.slash\n |> FeatherIcons.withSize 16\n |> FeatherIcons.toHtml []\n |> Element.html\n |> Element.el []\n , onPress =\n if isButtonEnabled then\n ChangedButtonStatus False\n |> Just\n\n else\n Nothing\n }\n\nEvery widgets comes with a type. You can think of the widgets as building blocks.\nYou can create you own widgets by sticking widgets types together.\n\n\n# Buttons\n\n![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png)\n\n[Open in Ellie](https://ellie-app.com/9p5QGZ3hgPLa1)\n\n@docs ButtonStyle, Button, TextButton, iconButton, textButton, button\n\n\n# Switch\n\n@docs SwitchStyle, Switch, switch\n\n\n# Select\n\n![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)\n\n[Open in Ellie](https://ellie-app.com/9p5QSzQDMCca1)\n\n@docs Select, selectButton, select\n\n![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)\n\n[Open in Ellie](https://ellie-app.com/9p5R5crjqfya1)\n\n@docs MultiSelect, multiSelect\n\n\n# Dialog\n\n![Dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png)\n\n[Open in Ellie](https://ellie-app.com/9p5Rdz625TZa1)\n\n@docs DialogStyle, Dialog, modal, dialog\n\n\n# List\n\n![List](https://orasund.github.io/elm-ui-widgets/assets/list.png)\n\n[Open in Ellie](https://ellie-app.com/9p5RJnDVVCKa1)\n\n\n## Row\n\n@docs RowStyle, row, buttonRow\n\n\n## Column\n\n@docs ColumnStyle, column, buttonColumn\n\n\n## Item\n\n@docs ItemStyle, Item, item\n@docs TextItemStyle, TextItem, textItem\n@docs ExpansionItemStyle, ExpansionItem, expansionItem\n@docs ImageItemStyle, ImageItem, imageItem\n@docs MultiLineItemStyle, MultiLineItem, multiLineItem\n@docs HeaderStyle, headerItem\n@docs DividerStyle, divider\n@docs itemList\n\n\n# Sort Table\n\n![SortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png)\n\n[Open in Ellie](https://ellie-app.com/9p5RXw44B4Ja1)\n\n@docs SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn\n\n\n# Text Input\n\n![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)\n\n[Open in Ellie](https://ellie-app.com/9p5S6cvWCmBa1)\n\n@docs TextInputStyle, TextInput, textInput\n\n\n# Tab\n\n![tab](https://orasund.github.io/elm-ui-widgets/assets/tab.png)\n\n[Open in Ellie](https://ellie-app.com/9p5Sdbvp4jZa1)\n\n@docs TabStyle, Tab, tab\n\n\n# Progress Indicator\n\n![progress Indicator](https://orasund.github.io/elm-ui-widgets/assets/progressIndicator.png)\n\n[Open in Ellie](https://ellie-app.com/c47GJktH2bqa1)\n\n@docs ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator\n\n","unions":[],"aliases":[{"name":"Button","comment":" Button widget type\n","args":["msg"],"type":"{ text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg }"},{"name":"ButtonStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { contentText : List.List (Element.Attribute msg) }, icon : { ifDisabled : Widget.IconStyle, ifActive : Widget.IconStyle, otherwise : Widget.IconStyle } } } }"},{"name":"Column","comment":" Column for the Sort Table widget type\n","args":["a"],"type":"Internal.SortTable.Column a"},{"name":"ColumnStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), ifSingleton : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } }"},{"name":"Dialog","comment":" Dialog widget type\n","args":["msg"],"type":"{ title : Maybe.Maybe String.String, text : String.String, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) }"},{"name":"DialogStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { title : { contentText : List.List (Element.Attribute msg) }, text : { contentText : List.List (Element.Attribute msg) }, buttons : { elementRow : List.List (Element.Attribute msg), content : { accept : Widget.ButtonStyle msg, dismiss : Widget.ButtonStyle msg } } } }"},{"name":"DividerStyle","comment":" ","args":["msg"],"type":"{ element : List.List (Element.Attribute msg) }"},{"name":"ExpansionItem","comment":" ","args":["msg"],"type":"{ icon : Widget.Icon msg, text : String.String, onToggle : Basics.Bool -> msg, content : List.List (Widget.Item msg), isExpanded : Basics.Bool }"},{"name":"ExpansionItemStyle","comment":" ","args":["msg"],"type":"{ item : Widget.ItemStyle (Widget.TextItemStyle msg) msg, expandIcon : Widget.Icon msg, collapseIcon : Widget.Icon msg }"},{"name":"HeaderStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { divider : Widget.DividerStyle msg, title : List.List (Element.Attribute msg) } }"},{"name":"ImageItem","comment":" ","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg, image : Element.Element msg, content : Widget.Icon msg }"},{"name":"ImageItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, image : { element : List.List (Element.Attribute msg) }, content : Widget.IconStyle } } }"},{"name":"Item","comment":" Item widget type.\n\nUse `Widget.item` if you want to turn a simple element into an item.\n\n","args":["msg"],"type":"List.List (Element.Attribute msg) -> Element.Element msg"},{"name":"ItemStyle","comment":" ","args":["content","msg"],"type":"{ element : List.List (Element.Attribute msg), content : content }"},{"name":"MultiLineItem","comment":" ","args":["msg"],"type":"{ title : String.String, text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg }"},{"name":"MultiLineItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { description : { elementColumn : List.List (Element.Attribute msg), content : { title : { elementText : List.List (Element.Attribute msg) }, text : { elementText : List.List (Element.Attribute msg) } } }, icon : { element : List.List (Element.Attribute msg), content : Widget.IconStyle }, content : Widget.IconStyle } } }"},{"name":"MultiSelect","comment":" Multi Select widget type\n\nTechnical Remark:\n\n - A more suitable name would be \"Options\"\n\n","args":["msg"],"type":"{ selected : Set.Set Basics.Int, options : List.List { text : String.String, icon : Widget.Icon msg }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"ProgressIndicator","comment":" Progress Indicator widget type\n\nIf `maybeProgress` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display.\nIf `maybeProgress` is set to `Just Float` (where the `Float` is proportion of completeness between 0 and 1 inclusive), a determinate progress indicator will visualize the progress.\n\n","args":[],"type":"Maybe.Maybe Basics.Float"},{"name":"ProgressIndicatorStyle","comment":" ","args":["msg"],"type":"{ elementFunction : Maybe.Maybe Basics.Float -> Element.Element msg }"},{"name":"RowStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), ifSingleton : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } }"},{"name":"Select","comment":" Select widget type\n\nTechnical Remark:\n\n - A more suitable name would be \"Choice\"\n\n","args":["msg"],"type":"{ selected : Maybe.Maybe Basics.Int, options : List.List { text : String.String, icon : Widget.Icon msg }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"SortTable","comment":" Sort Table widget type\n","args":["a","msg"],"type":"{ content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg }"},{"name":"SortTableStyle","comment":" Technical Remark:\n\n - If icons are defined in Svg, they might not display correctly.\n To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ elementTable : List.List (Element.Attribute msg), content : { header : Widget.ButtonStyle msg, ascIcon : Widget.Icon msg, descIcon : Widget.Icon msg, defaultIcon : Widget.Icon msg } }"},{"name":"Switch","comment":" Switch widget type\n","args":["msg"],"type":"{ description : String.String, onPress : Maybe.Maybe msg, active : Basics.Bool }"},{"name":"SwitchStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) }, contentInFront : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } } }"},{"name":"Tab","comment":" Tab widget type\n","args":["msg"],"type":"{ tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg }"},{"name":"TabStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { tabs : { elementRow : List.List (Element.Attribute msg), content : Widget.ButtonStyle msg }, content : List.List (Element.Attribute msg) } }"},{"name":"TextButton","comment":" Button widget type with no icon\n","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg }"},{"name":"TextInput","comment":" Text Input widget type\n","args":["msg"],"type":"{ chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg }"},{"name":"TextInputStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { chips : { elementRow : List.List (Element.Attribute msg), content : Widget.ButtonStyle msg }, text : { elementTextInput : List.List (Element.Attribute msg) } } }"},{"name":"TextItem","comment":" ","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg }"},{"name":"TextItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, icon : { element : List.List (Element.Attribute msg), content : Widget.IconStyle }, content : Widget.IconStyle } } }"}],"values":[{"name":"button","comment":" A button containing a text and an icon.\n\n import Widget.Material as Material\n import Material.Icons as MaterialIcons\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon as Icon\n\n type Msg\n = Submit\n\n button (Material.containedButton Material.defaultPalette)\n { text = \"Submit\"\n , icon = MaterialIcons.favorite |> Icon.elmMaterialIcons Color\n , onPress = Just Submit\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"buttonColumn","comment":" A column of buttons\n","type":"{ elementColumn : Widget.ColumnStyle msg, content : Widget.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"buttonRow","comment":" A row of buttons\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n selected : Maybe Int\n selected =\n Just 0\n\n Widget.select\n { selected = selected\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just (Select i ))\n }\n |> Widget.buttonRow\n { elementRow = Material.row\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"{ elementRow : Widget.RowStyle msg, content : Widget.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"circularProgressIndicator","comment":" Displays a circular progress indicator\n\n import Widget.Material as Material\n\n Just 0.75\n |> Widget.circularProgressIndicator (Material.progressIndicator Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ProgressIndicatorStyle msg -> Maybe.Maybe Basics.Float -> Element.Element msg"},{"name":"column","comment":" Replacement of `Element.column`\n\n import Element\n import Widget.Material as Material\n\n [ Element.text \"Text 1\"\n , Element.text \"Text 2\"\n ]\n |> Widget.column Material.column\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ColumnStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"dialog","comment":" A Dialog Window.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = Submit\n | Close\n\n Element.layout\n (dialog (Material.alertDialog Material.defaultPalette)\n { title = Just \"Accept\"\n , text = \"Are you sure?\"\n , accept =\n { text = \"Accept\"\n , onPress = Just Submit\n }\n |> Just\n , dismiss =\n { text = \"Cancel\"\n , onPress = Just Close\n }\n |> Just\n }\n )\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.DialogStyle msg -> { title : Maybe.Maybe String.String, text : String.String, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) } -> List.List (Element.Attribute msg)"},{"name":"divider","comment":" A divider.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.DividerStyle msg) msg -> Widget.Item msg"},{"name":"expansionItem","comment":" An expandable Item\n\n import Element\n import Widget.Material as Material\n import Widget.Material.Color as MaterialColor\n import Element.Font as Font\n\n type Msg =\n Toggle Bool\n\n let\n isExpanded : Bool\n isExpanded =\n True\n in\n ( [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n ++ Widget.expansionItem (Material.expansionItem Material.defaultPalette )\n { onToggle = Toggle\n , isExpanded = isExpanded\n , icon = always Element.none\n , text = \"Expandable Item\"\n , content =\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n }\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ExpansionItemStyle msg -> { icon : Widget.Icon msg, text : String.String, onToggle : Basics.Bool -> msg, content : List.List (Widget.Item msg), isExpanded : Basics.Bool } -> List.List (Widget.Item msg)"},{"name":"floatColumn","comment":" A Column containing a Float\n","type":"{ title : String.String, value : a -> Basics.Float, toString : Basics.Float -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"headerItem","comment":" A header for a part of a list.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.HeaderStyle msg) msg -> String.String -> Widget.Item msg"},{"name":"iconButton","comment":" A button containing only an icon, the text is used for screenreaders.\n\n import Widget.Material as Material\n import Material.Icons as MaterialIcons\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon as Icon\n\n type Msg\n = Like\n\n iconButton (Material.iconButton Material.defaultPalette)\n { text = \"Like\"\n , icon = MaterialIcons.favorite |> Icon.elmMaterialIcons Color\n , onPress = Just Like\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"imageItem","comment":" A clickable item that contains a image , a line of text and some additonal information\n\n import Element\n import Widget.Material as Material\n import Widget.Material.Color as MaterialColor\n import Element.Font as Font\n\n [ Widget.imageItem (Material.imageItem Material.defaultPalette)\n { onPress = Nothing\n , image =\n Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]\n { src = \"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png\"\n , description = \"Elm logo\"\n }\n , text = \"Item with Image\"\n , content =\n \\{ size, color } ->\n \"1.\"\n |> Element.text\n |> Element.el\n [ Font.color <| MaterialColor.fromColor color\n , Font.size size\n ]\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.ImageItemStyle msg) msg -> { text : String.String, onPress : Maybe.Maybe msg, image : Element.Element msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"intColumn","comment":" A Column containing a Int\n","type":"{ title : String.String, value : a -> Basics.Int, toString : Basics.Int -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"item","comment":" Simple element for a list.\n\n import Element\n import Widget.Material as Material\n\n Element.text \"Just a text\"\n |> Widget.item\n |> List.singleton\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Element.Element msg -> Widget.Item msg"},{"name":"itemList","comment":" Implementation of the Material design list\n\n import Element\n import Widget.Material as Material\n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ColumnStyle msg -> List.List (Widget.Item msg) -> Element.Element msg"},{"name":"modal","comment":" A modal.\n\n import Element\n\n type Msg\n = Close\n\n Element.layout\n (modal\n { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n )\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\nTechnical Remark:\n\n - To stop the screen from scrolling, set the height of the layout to the height of the screen.\n\n","type":"{ onDismiss : Maybe.Maybe msg, content : Element.Element msg } -> List.List (Element.Attribute msg)"},{"name":"multiLineItem","comment":" A item contining a text running over multiple lines.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.multiLineItem (Material.multiLineItem Material.defaultPalette)\n { title = \"Title\"\n , onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.MultiLineItemStyle msg) msg -> { title : String.String, text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"multiSelect","comment":" Selects multible options. This can be used for checkboxes.\n\n import Widget.Material as Material\n import Set\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = [1,2] |> Set.fromList\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.multiSelect\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.MultiSelect msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"row","comment":" Replacement of `Element.row`\n\n import Element\n import Widget.Material as Material\n\n [ Element.text \"Text 1\"\n , Element.text \"Text 2\"\n ]\n |> Widget.row Material.row\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.RowStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"select","comment":" Selects one out of multiple options. This can be used for radio buttons or Menus.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = Just 1\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.select\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.Select msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"selectButton","comment":" A simple button that can be selected.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = Just 1\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.select\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"sortTable","comment":" A table where the rows can be sorted by columns\n\n import Widget.Material as Material\n import Element\n\n type Msg =\n ChangedSorting String\n\n sortBy : String\n sortBy =\n \"Id\"\n\n asc : Bool\n asc =\n True\n\n Widget.sortTable (Material.sortTable Material.defaultPalette)\n { content =\n [ { id = 1, name = \"Antonio\", rating = 2.456, hash = Nothing }\n , { id = 2, name = \"Ana\", rating = 1.34, hash = Just \"45jf\" }\n , { id = 3, name = \"Alfred\", rating = 4.22, hash = Just \"6fs1\" }\n , { id = 4, name = \"Thomas\", rating = 3, hash = Just \"k52f\" }\n ]\n , columns =\n [ Widget.intColumn\n { title = \"Id\"\n , value = .id\n , toString = \\int -> \"#\" ++ String.fromInt int\n , width = Element.fill\n }\n , Widget.stringColumn\n { title = \"Name\"\n , value = .name\n , toString = identity\n , width = Element.fill\n }\n , Widget.floatColumn\n { title = \"Rating\"\n , value = .rating\n , toString = String.fromFloat\n , width = Element.fill\n }\n , Widget.unsortableColumn\n { title = \"Hash\"\n , toString = (\\{hash} -> hash |> Maybe.withDefault \"None\")\n , width = Element.fill\n }\n ]\n , asc = asc\n , sortBy = sortBy\n , onChange = ChangedSorting\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.SortTableStyle msg -> { content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg } -> Element.Element msg"},{"name":"stringColumn","comment":" A Column containing a String\n\n`value >> toString` field will be used for displaying the content.\n\n`value` will be used for comparing the content\n\nFor example `value = String.toLower` will make the sorting case-insensitive.\n\n","type":"{ title : String.String, value : a -> String.String, toString : String.String -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"switch","comment":" A boolean switch\n\n import Widget.Material as Material\n\n type Msg\n = Activate\n\n switch (Material.switch Material.defaultPalette)\n { description = \"Activate Dark Mode\"\n , onPress = Just Activate\n , active = False\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.SwitchStyle msg -> { description : String.String, onPress : Maybe.Maybe msg, active : Basics.Bool } -> Element.Element msg"},{"name":"tab","comment":" Displayes a list of contents in a tab\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n ChangedTab Int\n\n selected : Maybe Int\n selected =\n Just 0\n\n Widget.tab (Material.tab Material.defaultPalette)\n { tabs =\n { selected = selected\n , options =\n [ 1, 2, 3 ]\n |> List.map\n (\\int ->\n { text = \"Tab \" ++ (int |> String.fromInt)\n , icon = always Element.none\n }\n )\n , onSelect =\n (\\s ->\n if s >= 0 && s <= 2 then\n Just (ChangedTab s)\n else\n Nothing\n )\n }\n , content =\n (\\s ->\n case s of\n Just 0 ->\n \"This is Tab 1\" |> Element.text\n Just 1 ->\n \"This is the second tab\" |> Element.text\n Just 2 ->\n \"The thrid and last tab\" |> Element.text\n _ ->\n \"Please select a tab\" |> Element.text\n )\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.TabStyle msg -> { tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg } -> Element.Element msg"},{"name":"textButton","comment":" A button with just text and not icon.\n\n import Widget.Material as Material\n\n type Msg\n = Like\n\n textButton (Material.textButton Material.defaultPalette)\n { text = \"Like\"\n , onPress = Just Like\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { textButton | text : String.String, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"textInput","comment":" A text Input that allows to include chips.\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n ToggleTextInputChip String\n | SetTextInput String\n\n {text = \"Hello World\"}\n |> (\\model ->\n { chips =\n [ \"Cat\", \"Fish\", \"Dog\"]\n |> List.map\n (\\string ->\n { icon = always Element.none\n , text = string\n , onPress =\n string\n |> ToggleTextInputChip\n |> Just\n }\n )\n , text = model.text\n , placeholder = Nothing\n , label = \"Chips\"\n , onChange = SetTextInput\n }\n )\n |> Widget.textInput (Material.textInput Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.TextInputStyle msg -> { chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg } -> Element.Element msg"},{"name":"textItem","comment":" A clickable item that contains two spots for icons or additional information and a single line of text.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.TextItemStyle msg) msg -> { text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"unsortableColumn","comment":" An unsortable Column, when trying to sort by this column, nothing will change.\n","type":"{ title : String.String, toString : a -> String.String, width : Element.Length } -> Widget.Column a"}],"binops":[]},{"name":"Widget.Customize","comment":" Each and every widget can be customized by modifing the Style Type.\n\n {- Make a button fill the full width -}\n Widget.textButton\n ( Material.containedButton\n |> (\\record ->\n { record\n | element = record.element ++ [Element.width Element.fill]\n }\n )\n )\n { onPress = Just PressedButton\n , text = \"Press Button\"\n }\n\nThis module will contain helpfull functions to make customization easier.\n\n {- Make a button fill the full width -}\n Widget.textButton\n ( Material.containedButton\n |> Customize.element [Element.width Element.fill]\n )\n { onPress = Just PressedButton\n , text = \"Press Button\"\n }\n\n\n# Element\n\nA simple style type would be the following:\n\n type alias MyStyle =\n { element : List (Attribute msg) }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <| Element.none\n\n@docs element, mapElement\n\nA styling for a simple Elm-Ui button would be like this:\n\n type alias MyStyle =\n { elementButton : List (Attribute msg) }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.button style.elementButton\n { onPress = Just Something\n , label = Element.none\n }\n\n@docs elementButton, mapElementButton\n\n@docs elementColumn, mapElementColumn\n\n@docs elementRow, mapElementRow\n\n@docs elementTable, mapElementTable\n\n@docs elementTextInput, mapElementTextInput\n\n\n# Content\n\nWe can also style the content of an element.\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , content : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <|\n Element.el style.content <|\n Element.none\n\n@docs content, mapContent\n\nIf the content is just a text (or paragraph), then we use `contentText` instead:\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , contentText : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <|\n Element.text style.contentText <|\n \"Hello World\"\n\n@docs contentText, mapContentText\n\nIf some content is infront, we use `contentInFront`:\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , content : List (Attribute msg)\n , contentInFront : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el\n (style.element\n ++ [ Element.contentInFront <|\n Element.el style.contentInFront <|\n Element.none\n ]\n )\n <|\n Element.el style.contentInFront <|\n Element.none\n\n@docs contentInFront, mapContentInFront\n\n\n# Conditional Styling\n\nWe can include styling that depends on some state.\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , ifDisabled : List (Attribute msg)\n , otherwise : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Bool -> Element msg\n myWidget style isDisabled =\n Element.el\n (style.element\n ++ (if isDisabled then\n style.ifDisabled\n\n else\n style.otherwise\n )\n )\n <|\n Element.none\n\n@docs otherwise, mapOtherwise\n\n@docs ifActive, mapIfActive\n\n@docs ifDisabled, mapIfDisabled\n\n@docs ifFirst, mapIfFirst\n\n@docs ifLast, mapIfLast\n\n","unions":[],"aliases":[],"values":[{"name":"content","comment":" ","type":"List.List b -> { a | content : List.List b } -> { a | content : List.List b }"},{"name":"contentInFront","comment":" ","type":"List.List b -> { a | contentInFront : List.List b } -> { a | contentInFront : List.List b }"},{"name":"contentText","comment":" ","type":"List.List b -> { a | contentText : List.List b } -> { a | contentText : List.List b }"},{"name":"element","comment":" ","type":"List.List b -> { a | element : List.List b } -> { a | element : List.List b }"},{"name":"elementButton","comment":" ","type":"List.List b -> { a | elementButton : List.List b } -> { a | elementButton : List.List b }"},{"name":"elementColumn","comment":" ","type":"List.List b -> { a | elementColumn : List.List b } -> { a | elementColumn : List.List b }"},{"name":"elementRow","comment":" ","type":"List.List b -> { a | elementRow : List.List b } -> { a | elementRow : List.List b }"},{"name":"elementTable","comment":" ","type":"List.List b -> { a | elementTable : List.List b } -> { a | elementTable : List.List b }"},{"name":"elementTextInput","comment":" ","type":"List.List b -> { a | elementTextInput : List.List b } -> { a | elementTextInput : List.List b }"},{"name":"ifActive","comment":" ","type":"List.List b -> { a | ifActive : List.List b } -> { a | ifActive : List.List b }"},{"name":"ifDisabled","comment":" ","type":"List.List b -> { a | ifDisabled : List.List b } -> { a | ifDisabled : List.List b }"},{"name":"ifFirst","comment":" ","type":"List.List b -> { a | ifFirst : List.List b } -> { a | ifFirst : List.List b }"},{"name":"ifLast","comment":" ","type":"List.List b -> { a | ifLast : List.List b } -> { a | ifLast : List.List b }"},{"name":"mapContent","comment":" ","type":"(b -> b) -> { a | content : b } -> { a | content : b }"},{"name":"mapContentInFront","comment":" ","type":"(b -> b) -> { a | contentInFront : b } -> { a | contentInFront : b }"},{"name":"mapContentText","comment":" ","type":"(b -> b) -> { a | contentText : b } -> { a | contentText : b }"},{"name":"mapElement","comment":" ","type":"(b -> b) -> { a | element : b } -> { a | element : b }"},{"name":"mapElementButton","comment":" ","type":"(b -> b) -> { a | elementButton : b } -> { a | elementButton : b }"},{"name":"mapElementColumn","comment":" ","type":"(b -> b) -> { a | elementColumn : b } -> { a | elementColumn : b }"},{"name":"mapElementRow","comment":" ","type":"(b -> b) -> { a | elementRow : b } -> { a | elementRow : b }"},{"name":"mapElementTable","comment":" ","type":"(b -> b) -> { a | elementTable : b } -> { a | elementTable : b }"},{"name":"mapElementTextInput","comment":" ","type":"(b -> b) -> { a | elementTextInput : b } -> { a | elementTextInput : b }"},{"name":"mapIfActive","comment":" ","type":"(b -> b) -> { a | ifActive : b } -> { a | ifActive : b }"},{"name":"mapIfDisabled","comment":" ","type":"(b -> b) -> { a | ifDisabled : b } -> { a | ifDisabled : b }"},{"name":"mapIfFirst","comment":" ","type":"(b -> b) -> { a | ifFirst : b } -> { a | ifFirst : b }"},{"name":"mapIfLast","comment":" ","type":"(b -> b) -> { a | ifLast : b } -> { a | ifLast : b }"},{"name":"mapOtherwise","comment":" ","type":"(b -> b) -> { a | otherwise : b } -> { a | otherwise : b }"},{"name":"otherwise","comment":" ","type":"List.List b -> { a | otherwise : List.List b } -> { a | otherwise : List.List b }"}],"binops":[]},{"name":"Widget.Icon","comment":" This module ensures that every icon package on package.elm-lang.org is supported.\n\nJust look for the function with the name of the package and copy&paste the respective example.\n\n@docs IconStyle, Icon\n\n@docs antDesignIconsElm, elmFeather, elmFontawesome, elmHeroicons, elmIonicons, elmMaterialIcons, elmOcticons, elmZondicons, materialIcons\n\n","unions":[],"aliases":[{"name":"Icon","comment":" ","args":["msg"],"type":"{ size : Basics.Int, color : Color.Color } -> Element.Element msg"},{"name":"IconStyle","comment":" ","args":[],"type":"{ size : Basics.Int, color : Color.Color }"}],"values":[{"name":"antDesignIconsElm","comment":" For using [lemol/ant-design-icons-elm](https://dark.elm.dmy.fr/packages/lemol/ant-design-icons-elm/latest)\n\n import Ant.Icons.Svg\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Ant.Icons.Svg.checkOutlined\n |> Widget.Icon.antDesignIconsElm\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmFeather","comment":" For using [feathericons/elm-feather](https://dark.elm.dmy.fr/packages/feathericons/elm-feather/latest/)\n\n import FeatherIcons\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n FeatherIcons.check\n |> Widget.Icon.elmFeather FeatherIcons.toHtml\n\n","type":"(List.List (Svg.Attribute msg) -> icon -> Html.Html msg) -> icon -> Widget.Icon.Icon msg"},{"name":"elmFontawesome","comment":" For using [lattyware/elm-fontawesome](https://dark.elm.dmy.fr/packages/lattyware/elm-fontawesome/latest)\n\n import FontAwesome.Icon\n import FontAwesome.Solid\n import FontAwesome.Svg\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n FontAwesome.Solid.check\n |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon\n\n","type":"(icon -> Svg.Svg msg) -> icon -> Widget.Icon.Icon msg"},{"name":"elmHeroicons","comment":" For using [jasonliang-dev/elm-heroicons](https://dark.elm.dmy.fr/packages/jasonliang-dev/elm-heroicons/latest)\n\n import Heroicons.Solid\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Heroicons.Solid.check\n |> Widget.Icon.elmHeroicons\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmIonicons","comment":" For using [j-panasiuk/elm-ionicons](https://dark.elm.dmy.fr/packages/j-panasiuk/elm-ionicons/latest/)\n\n import Ionicon\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Ionicon.checkmark\n |> Widget.Icon.elmIonicons\n\n","type":"(Basics.Int -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float } -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmMaterialIcons","comment":" For using [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest/)\n\n import Material.Icons exposing (offline_bolt)\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Material.Icons.done\n |> Widget.Icon.elmMaterialIcons Color\n\n","type":"(Color.Color -> coloring) -> (Basics.Int -> coloring -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmOcticons","comment":" For using [capitalist/elm-octicons](https://dark.elm.dmy.fr/packages/capitalist/elm-octicons/latest)\n\n import Octicons\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Octicons.check\n |> Widget.Icon.elmOcticons\n { withSize = Octicons.size\n , withColor = Octicons.color\n , defaultOptions = Octicons.defaultOptions\n }\n\n","type":"{ withSize : Basics.Int -> options -> options, withColor : String.String -> options -> options, defaultOptions : options } -> (options -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmZondicons","comment":" For using [pehota/elm-zondicons](https://dark.elm.dmy.fr/packages/pehota/elm-zondicons/latest)\n\n import Widget.Icon exposing (Icon)\n import Zondicons\n\n check : Widget.Icon\n check =\n Zondicons.checkmark\n |> Widget.Icon.elmZondicons\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"materialIcons","comment":" For using [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/)\n\n import Material.Icons.Action\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Material.Icons.Action.done\n |> Widget.Icon.materialIcons\n\n","type":"(Color.Color -> Basics.Int -> Svg.Svg msg) -> Widget.Icon.Icon msg"}],"binops":[]},{"name":"Widget.Layout","comment":" Combines multiple concepts from the [material design specification](https://material.io/components/), namely:\n\n - Top App Bar\n - Navigation Draw\n - Side Panel\n - Dialog\n - Snackbar\n\nIt is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).\n\n\n# Basics\n\n@docs LayoutStyle, Layout, Part, init, timePassed, view\n\n\n# Actions\n\n@docs activate, queueMessage\n\n\n# Widgets\n\n@docs buttonSheet\n\n","unions":[{"name":"Part","comment":" The currently visible part: either the left sheet, right sheet or the search bar\n","args":[],"cases":[["LeftSheet",[]],["RightSheet",[]],["Search",[]]]}],"aliases":[{"name":"Layout","comment":" The model of the layout containing the snackbar and the currently active side sheet (or search bar)\n","args":["msg"],"type":"{ snackbar : Widget.Snackbar.Snackbar (Widget.Snackbar.Message msg), active : Maybe.Maybe Widget.Layout.Part }"},{"name":"LayoutStyle","comment":" Technical Remark:\n\n - If icons are defined in Svg, they might not display correctly.\n To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ container : List.List (Element.Attribute msg), snackbar : Widget.Snackbar.SnackbarStyle msg, layout : List.List (Element.Attribute msg) -> Element.Element msg -> Html.Html msg, header : List.List (Element.Attribute msg), sheet : List.List (Element.Attribute msg), sheetButton : Internal.Button.ButtonStyle msg, menuButton : Internal.Button.ButtonStyle msg, menuTabButton : Internal.Button.ButtonStyle msg, menuIcon : Widget.Icon.Icon msg, moreVerticalIcon : Widget.Icon.Icon msg, spacing : Basics.Int, title : List.List (Element.Attribute msg), searchIcon : Widget.Icon.Icon msg, search : Internal.TextInput.TextInputStyle msg, searchFill : Internal.TextInput.TextInputStyle msg }"}],"values":[{"name":"activate","comment":" Open either a side sheet or the search bar.\n","type":"Maybe.Maybe Widget.Layout.Part -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"buttonSheet","comment":" A side sheet containing only buttons. Will use the full hight.\n","type":"Widget.Layout.ButtonSheetStyle msg -> List.List (Internal.Button.Button msg) -> Element.Element msg"},{"name":"init","comment":" The initial state of the layout\n","type":"Widget.Layout.Layout msg"},{"name":"queueMessage","comment":" Queues a message and displayes it as a snackbar once no other snackbar is visible.\n","type":"Widget.Snackbar.Message msg -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"timePassed","comment":" Update the model, put this function into your subscription.\nThe first argument is the seconds that have passed sice the function was called last.\n","type":"Basics.Int -> Widget.Layout.Layout msg -> Widget.Layout.Layout msg"},{"name":"view","comment":" View the layout.\n","type":"Widget.Layout.LayoutStyle msg -> { window : { height : Basics.Int, width : Basics.Int }, dialog : Maybe.Maybe (List.List (Element.Attribute msg)), layout : Widget.Layout.Layout msg, title : Element.Element msg, menu : Internal.Select.Select msg, search : Maybe.Maybe (Internal.TextInput.TextInput msg), actions : List.List (Internal.Button.Button msg), onChangedSidebar : Maybe.Maybe Widget.Layout.Part -> msg } -> Element.Element msg -> Html.Html msg"}],"binops":[]},{"name":"Widget.Material","comment":" ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)\n\nThis module implements a Material design theme for all widgets.\n\nThe stylings are following [the official Material Design guidelines](https://material.io/components) as close as possible.\nPlease use these widgets in combination with the official guidelines.\n\nThe typograpahy is taken from [the material design guidelines](https://material.io/design/typography/the-type-system.html#type-scale).\nIts recommended to use a font size of 16px width and the [Roboto Font](https://fonts.google.com/specimen/Roboto?query=Ro).\n\nThe style are not opaque, so you can change every styling to your needs.\n\nIf you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos.\n\n\n# Palette\n\n@docs Palette, defaultPalette, darkPalette\n\n\n# Button\n\nDifferent styles for buttons have different meanings.\n\n - Use `textButton` as your default button\n - Use `containedButton` for any important action\n - Use `outlinedButton` if you have more then one important action.\n Use `containedButton` for **the most** important action of the group.\n\n@docs containedButton, outlinedButton, textButton\n\n@docs iconButton, toggleButton, buttonRow\n\n\n# Switch\n\n@docs switch\n\n\n# Card\n\nIn the material design specification the card is not really specified at all.\nIm practice the List seams more useful then a own card widget.\nThus for now we only provide a card containing a list.\n\n@docs cardColumn\n\n\n# Chip\n\n@docs chip, textInput\n\n\n# Dialog\n\n@docs alertDialog\n\n\n# List\n\nThe [List widget](https://material.io/components/lists) is a very complex widget that sadly only particially made it into this package.\n\n@docs row, column\n\n\n# Item\n\nA List is build from items.\nYou way want to use special items to visually organize the content of your list.\n\n@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem\n\n\n# Progress Indicator\n\n@docs progressIndicator\n\n\n# Sort Table\n\n@docs sortTable\n\n\n# Snackbar\n\n@docs snackbar\n\n\n# Tab\n\n@docs tab, tabButton\n\n\n# Layout\n\n@docs layout\n\n\n# Advanced\n\nTo create your own Material Widgets, here are all internal functions.\nNote that you might want to checkout the [file on GitHub](https://github.com/Orasund/elm-ui-widgets/blob/master/src/Widget/Style/Material.elm) if you want to tweak some internal behaviour.\n\n","unions":[],"aliases":[{"name":"Palette","comment":" The material design comes with customizable color palettes.\n\nCheck out [the official documentation about the color system](https://material.io/design/color/the-color-system.html#color-theme-creation) to see how these colors are used.\n\nFor the `-on` colors you can use white, for transitions into white, or black,for transitions into black. Other colors are also possible, but i've not seen any website acutally using a different color.\n\n","args":[],"type":"{ primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color, on : { primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color } }"}],"values":[{"name":"alertDialog","comment":" An alert dialog for important decisions. Use a snackbar for less important notification.\n","type":"Widget.Material.Palette -> Internal.Dialog.DialogStyle msg"},{"name":"buttonRow","comment":" a Row of buttons.\n\nOnly use in combination with `toggleButton`\n\n","type":"Internal.List.RowStyle msg"},{"name":"cardColumn","comment":" A List styled like a card.\n\nTechnical Remark:\n\nThis is a simplification of the [Material Design Card\n](https://material.io/components/cards) and might get replaced at a later date.\n\n","type":"Widget.Material.Palette -> Internal.List.ColumnStyle msg"},{"name":"chip","comment":" Chips have the same behaviour as buttons but are visually less important.\n\nIn the [official documentation](https://material.io/components/chips#types) chips have different names depending on where they are used:\n\n - **Input Chips** are used inside a text field. Use `textInput` for this feature.\n - **Choice Chips** are used for selcting an option.\n The material design guidelines recommend using `toggleButton` for icons with no text and chips for text with no icons.\n - **Filter Chips** are used for selecting multiple options. They typically have a done-icon when selected.\n - **Action chips** are like button. Make sure to include an icon when using action chips.\n\nTechnical Remark:\n\n - Desided against the implementation of an outlined chip.\n Please open a new issue or a PR if you want to have it implemented.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"column","comment":" A simple styling for a column.\n","type":"Internal.List.ColumnStyle msg"},{"name":"containedButton","comment":" A contained button representing the most important action of a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"darkPalette","comment":" The offical dark theme of google.\n\n![The dark theme](https://lh3.googleusercontent.com/tv7J2o4ZiSmLYwyBslBs_PLzKyzI8QUV5qdvHGfoAQn9r7pY4Hj5SmW27m3zUWeDtRSE8Cb5_5PQmkbavDfw7XbIL8EodIKZhilRdg=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/dark-theme.html#ui-application)_\n\n","type":"Widget.Material.Palette"},{"name":"defaultPalette","comment":" The default color theme.\n\n![The default theme](https://lh3.googleusercontent.com/k6WO1fd7T40A9JvSVfHqs0CPLFyTEDCecsVGxEDhOaTP0wUTPYOVVkxt60hKxBprgNoMqs8OyKqtlaQ4tDBtQJs-fTcZrpZEjxhUVQ=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/the-color-system.html#color-theme-creation)_\n\n","type":"Widget.Material.Palette"},{"name":"expansionItem","comment":" An expandable item.\n\nTechnical Remarks:\n\n - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).\n\n","type":"Widget.Material.Palette -> Internal.Item.ExpansionItemStyle msg"},{"name":"fullBleedDivider","comment":" A divider covering the full length\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"fullBleedHeader","comment":" A header of a section of a list. Comes with a full bleed divider.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg"},{"name":"iconButton","comment":" An single selectable icon.\n\nTechnical Remark:\n\n - Could not find any specification details\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"imageItem","comment":" Similar to a textItem but with an image instead of the icon.\n\nIf the image is bigger then 40x40, the size of the item will change.\n\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.ImageItemStyle msg) msg"},{"name":"insetDivider","comment":" A divider covering only parts of the width\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"insetHeader","comment":" A header of a section of a list. Comes with a inset divider.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg"},{"name":"layout","comment":" The Layout Widget combines the following Material design concepts:\n\n - Top bar\n - Navigation drawer\n - Side Sheet\n - Dialog\n - Snackbar\n\nFuture updates might try to seperate them into there own widgets.\nBut for now they are only available as an all-in-one solution.\n\nTechnical Remark:\n\n - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).\n - The drawer button as not taken from the specification (This will been to be added later)\n\n","type":"Widget.Material.Palette -> Widget.Layout.LayoutStyle msg"},{"name":"middleDivider","comment":" A divider in the center\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"multiLineItem","comment":" A text item allowing for more text.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.MultiLineItemStyle msg) msg"},{"name":"outlinedButton","comment":" A outlined button representing an important action within a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"progressIndicator","comment":" A circular progress indicator\n","type":"Widget.Material.Palette -> Internal.ProgressIndicator.ProgressIndicatorStyle msg"},{"name":"row","comment":" A simple styling for a row.\n","type":"Internal.List.RowStyle msg"},{"name":"snackbar","comment":" A typical snackbar\n\nTechnical Remark:\n\n - The text color of the button was not given in the specification. This implementation\n adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)\n\n","type":"Widget.Material.Palette -> Widget.Snackbar.SnackbarStyle msg"},{"name":"sortTable","comment":" A sortable table\n","type":"Widget.Material.Palette -> Internal.SortTable.SortTableStyle msg"},{"name":"switch","comment":" A boolean switch\n\nTechnical Remark:\n\n - The specification states that the disabled switch should have a color dependend on its activness. This is not implemented.\n\n","type":"Widget.Material.Palette -> Internal.Switch.SwitchStyle msg"},{"name":"tab","comment":" A Tab bar meant for only the upper most level. Do not use a tab within a tab.\n","type":"Widget.Material.Palette -> Internal.Tab.TabStyle msg"},{"name":"tabButton","comment":" A single Tab button.\n\nTechnical Remark:\n\n - The official specification states that the background color should be the surface color,\n but the pictures and actuall implementations all have no background color.\n So here the background color is also not set.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"textButton","comment":" A text button representing a simple action within a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"textInput","comment":" A text input style that is included only to support input chips.\n\nTechnical Remark:\n\n - This is just a temporary implementation. It will soon be replaced with the official implementation.\n\n","type":"Widget.Material.Palette -> Internal.TextInput.TextInputStyle msg"},{"name":"textItem","comment":" A basic item containg some text, a button and some additional information.\n\nTechnical Remark:\n\nThere are some conflicting informations about the height of an element in the [Specification](https://material.io/components/lists#specs).\nA normal item should be 48 height, but a item with an icon should be 56. This is confusing, because a normal item can also have an additional icon that is the same size.\n\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.TextItemStyle msg) msg"},{"name":"toggleButton","comment":" A ToggleButton. Only use as a group in combination with `buttonRow`.\n\nToggle buttons should only be used with the `iconButton` widget, else use chips instead.\n\nTechnical Remark:\n\n - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)\n - There are two different versions, one where the selected color is gray and another where the color is primary.\n I noticed the gray version was used more often, so i went with that one.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"}],"binops":[]},{"name":"Widget.Material.Color","comment":" This module contains functions to adapt color in various ways.\n\nWe use the CIELCH color space, while the material design on chrome uses sRGB.\nCIELCH colors ensure that the result of mixing colors looks natural, where as\nsRGB is optimized to mix images together.\n\nIn practice this means that in edge-cases our package will produce better results,\nthen the javascript material design implementation.\n\n\n## Opacity Constants for Buttons\n\n@docs buttonHoverOpacity, buttonFocusOpacity, buttonPressedOpacity, buttonDisabledOpacity, buttonSelectedOpacity\n\n\n## Accessibility\n\n@docs accessibleTextColor, accessibleWithTextColor\n\n\n## Shades\n\n@docs withShade, scaleOpacity\n\n\n## Predefined Colors\n\n@docs dark, gray\n\n\n## Utility Functions\n\n@docs toCIELCH, fromCIELCH, shadow, fromColor, textAndBackground\n\n","unions":[],"aliases":[],"values":[{"name":"accessibleTextColor","comment":" Returns either Black or White, depending of the input color.\n","type":"Color.Color -> Color.Color"},{"name":"accessibleWithTextColor","comment":" Returns the first color, adapted to ensure accessibility rules.\n\n accessibleTextColor bgColor =\n accessibleWithTextColor (Color.rgb255 255 255 255) bgColor\n\n","type":"Color.Color -> Color.Color -> Color.Color"},{"name":"buttonDisabledOpacity","comment":" Opacity value for a disabled button\n","type":"Basics.Float"},{"name":"buttonFocusOpacity","comment":" Opacity value for a focused button\n","type":"Basics.Float"},{"name":"buttonHoverOpacity","comment":" Opacity value for hovering over a button\n","type":"Basics.Float"},{"name":"buttonPressedOpacity","comment":" Opacity value for a pressed button\n","type":"Basics.Float"},{"name":"buttonSelectedOpacity","comment":" Opacity value for a selected button\n","type":"Basics.Float"},{"name":"dark","comment":" dark gray\n","type":"Color.Color"},{"name":"fromCIELCH","comment":" Utility function to convert CIELCH color space back to a color\n","type":"{ l : Basics.Float, c : Basics.Float, h : Basics.Float } -> Color.Color"},{"name":"fromColor","comment":" Utillity function to convert from Color to Element.Color\n","type":"Color.Color -> Element.Color"},{"name":"gray","comment":" gray\n","type":"Color.Color"},{"name":"scaleOpacity","comment":" Multiply the opacity value by a given value\n\n scaleOpacity (0.25 \\* 2) ==\n scaleOpacity 0.25 >> scaleOpacity 2\n\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"shadow","comment":" Returns a Material Design shadow\n","type":"Basics.Float -> { offset : ( Basics.Float, Basics.Float ), size : Basics.Float, blur : Basics.Float, color : Element.Color }"},{"name":"textAndBackground","comment":" applies a color the background and ensures that the font color is accessible.\n","type":"Color.Color -> List.List (Element.Attr decorative msg)"},{"name":"toCIELCH","comment":" Utility function to convert a color to CIELCH color space\n","type":"Color.Color -> { l : Basics.Float, c : Basics.Float, h : Basics.Float }"},{"name":"withShade","comment":" Simulates adding a color in front (subtractive color mixing).\n\n --Darkens the color by 50%\n withShade (Color.rgb255 255 255 255) 0.5\n\n --Makes the color 50% more red\n withShade (Color.rgb255 255 0 0) 0.5\n\n","type":"Color.Color -> Basics.Float -> Color.Color -> Color.Color"}],"binops":[]},{"name":"Widget.Material.Typography","comment":" An implementation of the Material design typography.\n\nIt is optimized for the _Roboto_ font\n\n\n## Headline\n\n@docs h1, h2, h3, h4, h5, h6\n\n\n## Subtitle\n\n@docs subtitle1, subtitle2\n\n\n## Body\n\n@docs body1, body2\n\n\n## Miscellaneous\n\n@docs button, caption, overline\n\n","unions":[],"aliases":[],"values":[{"name":"body1","comment":" Variant 1 for the default font size: 16px\n","type":"List.List (Element.Attribute msg)"},{"name":"body2","comment":" Variant 2 for the default font size: 14px\n","type":"List.List (Element.Attribute msg)"},{"name":"button","comment":" Font for Material Design buttons. Size: 14px\n","type":"List.List (Element.Attribute msg)"},{"name":"caption","comment":" Captions for Material Design. Size: 12px\n","type":"List.List (Element.Attribute msg)"},{"name":"h1","comment":" Headline 1 for Material Design. Size: 96px\n","type":"List.List (Element.Attribute msg)"},{"name":"h2","comment":" Headline 2 for Material Design. Size: 60px\n","type":"List.List (Element.Attribute msg)"},{"name":"h3","comment":" Headline 3 for Material Design. Size: 48px\n","type":"List.List (Element.Attribute msg)"},{"name":"h4","comment":" Headline 3 for Material Design. Size: 34px\n","type":"List.List (Element.Attribute msg)"},{"name":"h5","comment":" Headline 3 for Material Design. Size: 24px\n","type":"List.List (Element.Attribute msg)"},{"name":"h6","comment":" Headline 3 for Material Design. Size: 20px\n","type":"List.List (Element.Attribute msg)"},{"name":"overline","comment":" overline for Material Design. Size: 10px\n","type":"List.List (Element.Attribute msg)"},{"name":"subtitle1","comment":" Variant 1 for subtitles for Material Design. Size: 16px\n","type":"List.List (Element.Attribute msg)"},{"name":"subtitle2","comment":" Variant 2 for subtitles for Material Design. Size: 14px\n","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Widget.ScrollingNav","comment":" The Scrolling Nav is a navigation bar thats updates while you scroll through\nthe page. Clicking on a navigation button will scroll directly to that section.\n\n\n# Basics\n\n@docs ScrollingNav, init, view, current, toSelect\n\n\n# Operations\n\n@docs jumpTo, jumpToWithOffset, syncPositions, getPos, setPos\n\n","unions":[],"aliases":[{"name":"ScrollingNav","comment":" ","args":["section"],"type":"{ toString : section -> String.String, fromString : String.String -> Maybe.Maybe section, positions : IntDict.IntDict String.String, arrangement : List.List section, scrollPos : Basics.Int }"}],"values":[{"name":"current","comment":" Returns the current section\n","type":"(String.String -> Maybe.Maybe section) -> Widget.ScrollingNav.ScrollingNav section -> Maybe.Maybe section"},{"name":"getPos","comment":" Syncs the position of of the viewport\n","type":"Task.Task x (Widget.ScrollingNav.ScrollingNav selection -> Widget.ScrollingNav.ScrollingNav selection)"},{"name":"init","comment":" The intial state include the labels and the arrangement of the sections\n","type":"{ toString : section -> String.String, fromString : String.String -> Maybe.Maybe section, arrangement : List.List section, toMsg : Result.Result Browser.Dom.Error (Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section) -> msg } -> ( Widget.ScrollingNav.ScrollingNav section, Platform.Cmd.Cmd msg )"},{"name":"jumpTo","comment":" Scrolls the screen to the respective section\n","type":"{ section : section, onChange : Result.Result Browser.Dom.Error () -> msg } -> Widget.ScrollingNav.ScrollingNav section -> Platform.Cmd.Cmd msg"},{"name":"jumpToWithOffset","comment":" Scrolls the screen to the respective section with some offset\n","type":"{ offset : Basics.Float, section : section, onChange : Result.Result Browser.Dom.Error () -> msg } -> Widget.ScrollingNav.ScrollingNav section -> Platform.Cmd.Cmd msg"},{"name":"setPos","comment":" sets the position of the viewport to show a specific section\n","type":"Basics.Int -> Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section"},{"name":"syncPositions","comment":" Updates the positions of all sections.\nThis functions should be called regularly if the height of elements on your page can change during time.\n","type":"Widget.ScrollingNav.ScrollingNav section -> Task.Task Browser.Dom.Error (Widget.ScrollingNav.ScrollingNav section -> Widget.ScrollingNav.ScrollingNav section)"},{"name":"toSelect","comment":" Returns a select widget containing all section, with the current section selected.\n","type":"(Basics.Int -> Maybe.Maybe msg) -> Widget.ScrollingNav.ScrollingNav section -> Widget.Select msg"},{"name":"view","comment":" Opinionated way of viewing the section.\n\nThis might be useful at first, but you should consider writing your own view function.\n\n view :\n (section -> Element msg)\n -> Model section\n -> List (Element msg)\n view asElement { toString, arrangement } =\n arrangement\n |> List.map\n (\\header ->\n Element.el\n [ header\n |> toString\n |> Attributes.id\n |> Element.htmlAttribute\n , Element.width <| Element.fill\n ]\n <|\n asElement <|\n header\n )\n\n","type":"(section -> Element.Element msg) -> Widget.ScrollingNav.ScrollingNav section -> List.List (Element.Element msg)"}],"binops":[]},{"name":"Widget.Snackbar","comment":" ![Snackbar](https://orasund.github.io/elm-ui-widgets/assets/snackbar.png)\n\nA [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.\n\n[Open in Ellie](https://ellie-app.com/9pz7FqhVW83a1)\n\n\n# Basics\n\n@docs SnackbarStyle, Snackbar, Message, init, current, timePassed, view\n\n\n# Operations\n\n@docs insert, insertFor, dismiss\n\n","unions":[],"aliases":[{"name":"Message","comment":" A message with maybe some action button\n","args":["msg"],"type":"{ text : String.String, button : Maybe.Maybe (Internal.Button.TextButton msg) }"},{"name":"Snackbar","comment":" A snackbar has a queue of Notifications, each with the amount of ms the message should be displayed\n","args":["a"],"type":"{ queue : Queue.Queue ( a, Basics.Int ), current : Maybe.Maybe ( a, Basics.Int ) }"},{"name":"SnackbarStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, button : Internal.Button.ButtonStyle msg } }"}],"values":[{"name":"current","comment":" Returns the current element.\n","type":"Widget.Snackbar.Snackbar a -> Maybe.Maybe a"},{"name":"dismiss","comment":" Dismiss the current message.\n","type":"Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"init","comment":" Inital state\n","type":"Widget.Snackbar.Snackbar a"},{"name":"insert","comment":" Insert a message that will last for 10 seconds.\n","type":"a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"insertFor","comment":" Insert a message for a specific amount of milli seconds.\n","type":"Basics.Int -> a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"timePassed","comment":" Updates the model. This functions should be called regularly.\nThe first argument is the milli seconds that passed since the last time the function was called.\n","type":"Basics.Int -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"view","comment":" Views the current Message. (only one at a time)\n","type":"Widget.Snackbar.SnackbarStyle msg -> (a -> Widget.Snackbar.Message msg) -> Widget.Snackbar.Snackbar a -> Maybe.Maybe (Element.Element msg)"}],"binops":[]}] \ No newline at end of file +[{"name":"Widget","comment":" This module contains different stateless view functions. No wiring required.\n\n Widget.button Material.primaryButton\n { text = \"disable me\"\n , icon =\n FeatherIcons.slash\n |> FeatherIcons.withSize 16\n |> FeatherIcons.toHtml []\n |> Element.html\n |> Element.el []\n , onPress =\n if isButtonEnabled then\n ChangedButtonStatus False\n |> Just\n\n else\n Nothing\n }\n\nEvery widgets comes with a type. You can think of the widgets as building blocks.\nYou can create you own widgets by sticking widgets types together.\n\n\n# Buttons\n\n![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png)\n\n@docs ButtonStyle, Button, TextButton, iconButton, textButton, button\n\n\n# Switch\n\n![Switch](https://orasund.github.io/elm-ui-widgets/assets/switch.png)\n\n@docs SwitchStyle, Switch, switch\n\n\n# Select\n\n![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)\n\n@docs Select, selectButton, select\n\n![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)\n\n@docs MultiSelect, multiSelect\n\n\n# Modal\n\n![Modal](https://orasund.github.io/elm-ui-widgets/assets/modal.png)\n\n@docs Modal, singleModal, multiModal\n\n\n# Dialog\n\n![Dialog](https://orasund.github.io/elm-ui-widgets/assets/dialog.png)\n\n[Open in Ellie](https://ellie-app.com/9p5Rdz625TZa1)\n\n@docs DialogStyle, Dialog, dialog\n\n\n# List\n\n![List](https://orasund.github.io/elm-ui-widgets/assets/list.png)\n\n[Open in Ellie](https://ellie-app.com/9p5RJnDVVCKa1)\n\n\n## Row\n\n@docs RowStyle, row, buttonRow\n\n\n## Column\n\n@docs ColumnStyle, column, buttonColumn\n\n\n## Item\n\n@docs ItemStyle, Item\n@docs FullBleedItemStyle, fullBleedItem\n@docs InsetItem, InsetItemStyle, insetItem\n@docs ExpansionItemStyle, ExpansionItem, expansionItem\n@docs ImageItemStyle, ImageItem, imageItem\n@docs MultiLineItemStyle, MultiLineItem, multiLineItem\n@docs HeaderStyle, headerItem\n@docs DividerStyle, divider\n@docs selectItem, asItem\n@docs itemList\n\n\n# App Bar\n\n![App Bar](https://orasund.github.io/elm-ui-widgets/assets/appBar.png)\n\n@docs AppBarStyle, menuBar, tabBar\n\n\n# Sort Table\n\n![Sort Table](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png)\n\n@docs SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn\n\n\n# Text Input\n\n![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png)\n\n@docs TextInputStyle, TextInput, textInput\n\n\n# Tab\n\n![tab](https://orasund.github.io/elm-ui-widgets/assets/tab.png)\n\n@docs TabStyle, Tab, tab\n\n\n# Progress Indicator\n\n![progress Indicator](https://orasund.github.io/elm-ui-widgets/assets/progressIndicator.png)\n\n@docs ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator\n\n","unions":[],"aliases":[{"name":"AppBarStyle","comment":" ","args":["content","msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { menu : { elementRow : List.List (Element.Attribute msg), content : content }, search : Widget.TextInputStyle msg, actions : { elementRow : List.List (Element.Attribute msg), content : { button : Widget.ButtonStyle msg, searchIcon : Widget.Icon msg, moreVerticalIcon : Widget.Icon msg } } } }"},{"name":"Button","comment":" Button widget type\n","args":["msg"],"type":"{ text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg }"},{"name":"ButtonStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { contentText : List.List (Element.Attribute msg) }, icon : { ifDisabled : Widget.IconStyle, ifActive : Widget.IconStyle, otherwise : Widget.IconStyle } } } }"},{"name":"Column","comment":" Column for the Sort Table widget type\n","args":["a"],"type":"Internal.SortTable.Column a"},{"name":"ColumnStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), ifSingleton : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } }"},{"name":"Dialog","comment":" Dialog widget type\n","args":["msg"],"type":"{ title : Maybe.Maybe String.String, text : String.String, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) }"},{"name":"DialogStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { title : { contentText : List.List (Element.Attribute msg) }, text : { contentText : List.List (Element.Attribute msg) }, buttons : { elementRow : List.List (Element.Attribute msg), content : { accept : Widget.ButtonStyle msg, dismiss : Widget.ButtonStyle msg } } } }"},{"name":"DividerStyle","comment":" ","args":["msg"],"type":"{ element : List.List (Element.Attribute msg) }"},{"name":"ExpansionItem","comment":" ","args":["msg"],"type":"{ icon : Widget.Icon msg, text : String.String, onToggle : Basics.Bool -> msg, content : List.List (Widget.Item msg), isExpanded : Basics.Bool }"},{"name":"ExpansionItemStyle","comment":" ","args":["msg"],"type":"{ item : Widget.ItemStyle (Widget.InsetItemStyle msg) msg, expandIcon : Widget.Icon msg, collapseIcon : Widget.Icon msg }"},{"name":"FullBleedItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, icon : Widget.IconStyle } } }"},{"name":"HeaderStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { divider : Widget.DividerStyle msg, title : List.List (Element.Attribute msg) } }"},{"name":"ImageItem","comment":" ","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg, image : Element.Element msg, content : Widget.Icon msg }"},{"name":"ImageItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, image : { element : List.List (Element.Attribute msg) }, content : Widget.IconStyle } } }"},{"name":"InsetItem","comment":" ","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg }"},{"name":"InsetItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, icon : { element : List.List (Element.Attribute msg), content : Widget.IconStyle }, content : Widget.IconStyle } } }"},{"name":"Item","comment":" Item widget type.\n\nUse `Widget.asItem` if you want to turn a simple element into an item.\n\n","args":["msg"],"type":"List.List (Element.Attribute msg) -> Element.Element msg"},{"name":"ItemStyle","comment":" ","args":["content","msg"],"type":"{ element : List.List (Element.Attribute msg), content : content }"},{"name":"Modal","comment":" ","args":["msg"],"type":"{ onDismiss : Maybe.Maybe msg, content : Element.Element msg }"},{"name":"MultiLineItem","comment":" ","args":["msg"],"type":"{ title : String.String, text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg }"},{"name":"MultiLineItemStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { elementRow : List.List (Element.Attribute msg), content : { description : { elementColumn : List.List (Element.Attribute msg), content : { title : { elementText : List.List (Element.Attribute msg) }, text : { elementText : List.List (Element.Attribute msg) } } }, icon : { element : List.List (Element.Attribute msg), content : Widget.IconStyle }, content : Widget.IconStyle } } }"},{"name":"MultiSelect","comment":" Multi Select widget type\n\nTechnical Remark:\n\n - A more suitable name would be \"Options\"\n\n","args":["msg"],"type":"{ selected : Set.Set Basics.Int, options : List.List { text : String.String, icon : Widget.Icon msg }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"ProgressIndicator","comment":" Progress Indicator widget type\n\nIf `maybeProgress` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display.\nIf `maybeProgress` is set to `Just Float` (where the `Float` is proportion of completeness between 0 and 1 inclusive), a determinate progress indicator will visualize the progress.\n\n","args":[],"type":"Maybe.Maybe Basics.Float"},{"name":"ProgressIndicatorStyle","comment":" ","args":["msg"],"type":"{ elementFunction : Maybe.Maybe Basics.Float -> Element.Element msg }"},{"name":"RowStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifFirst : List.List (Element.Attribute msg), ifLast : List.List (Element.Attribute msg), ifSingleton : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } }"},{"name":"Select","comment":" Select widget type\n\nTechnical Remark:\n\n - A more suitable name would be \"Choice\"\n\n","args":["msg"],"type":"{ selected : Maybe.Maybe Basics.Int, options : List.List { text : String.String, icon : Widget.Icon msg }, onSelect : Basics.Int -> Maybe.Maybe msg }"},{"name":"SortTable","comment":" Sort Table widget type\n","args":["a","msg"],"type":"{ content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg }"},{"name":"SortTableStyle","comment":" Technical Remark:\n\n - If icons are defined in Svg, they might not display correctly.\n To avoid that, make sure to wrap them in `Element.html >> Element.el []`\n\n","args":["msg"],"type":"{ elementTable : List.List (Element.Attribute msg), content : { header : Widget.ButtonStyle msg, ascIcon : Widget.Icon msg, descIcon : Widget.Icon msg, defaultIcon : Widget.Icon msg } }"},{"name":"Switch","comment":" Switch widget type\n","args":["msg"],"type":"{ description : String.String, onPress : Maybe.Maybe msg, active : Basics.Bool }"},{"name":"SwitchStyle","comment":" ","args":["msg"],"type":"{ elementButton : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) }, contentInFront : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg), content : { element : List.List (Element.Attribute msg), ifDisabled : List.List (Element.Attribute msg), ifActive : List.List (Element.Attribute msg), otherwise : List.List (Element.Attribute msg) } } }"},{"name":"Tab","comment":" Tab widget type\n","args":["msg"],"type":"{ tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg }"},{"name":"TabStyle","comment":" ","args":["msg"],"type":"{ elementColumn : List.List (Element.Attribute msg), content : { tabs : { elementRow : List.List (Element.Attribute msg), content : Widget.ButtonStyle msg }, content : List.List (Element.Attribute msg) } }"},{"name":"TextButton","comment":" Button widget type with no icon\n","args":["msg"],"type":"{ text : String.String, onPress : Maybe.Maybe msg }"},{"name":"TextInput","comment":" Text Input widget type\n","args":["msg"],"type":"{ chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg }"},{"name":"TextInputStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { chips : { elementRow : List.List (Element.Attribute msg), content : Widget.ButtonStyle msg }, text : { elementTextInput : List.List (Element.Attribute msg) } } }"}],"values":[{"name":"asItem","comment":" Turns a Element into an item. Only use if you want to take care of the styling yourself.\n\n import Element\n import Widget.Material as Material\n\n Element.text \"Just a text\"\n |> Widget.asItem\n |> List.singleton\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Element.Element msg -> Widget.Item msg"},{"name":"button","comment":" A button containing a text and an icon.\n\n import Widget.Material as Material\n import Material.Icons as MaterialIcons\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon as Icon\n\n type Msg\n = Submit\n\n button (Material.containedButton Material.defaultPalette)\n { text = \"Submit\"\n , icon = MaterialIcons.favorite |> Icon.elmMaterialIcons Color\n , onPress = Just Submit\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"buttonColumn","comment":" A column of buttons\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n selected : Maybe Int\n selected =\n Just 0\n\n Widget.select\n { selected = selected\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just (Select i ))\n }\n |> Widget.buttonColumn\n { elementColumn = Material.column\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"{ elementColumn : Widget.ColumnStyle msg, content : Widget.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"buttonRow","comment":" A row of buttons\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n selected : Maybe Int\n selected =\n Just 0\n\n Widget.select\n { selected = selected\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just (Select i ))\n }\n |> Widget.buttonRow\n { elementRow = Material.row\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"{ elementRow : Widget.RowStyle msg, content : Widget.ButtonStyle msg } -> List.List ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"circularProgressIndicator","comment":" Displays a circular progress indicator\n\n import Widget.Material as Material\n\n Just 0.75\n |> Widget.circularProgressIndicator (Material.progressIndicator Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ProgressIndicatorStyle msg -> Maybe.Maybe Basics.Float -> Element.Element msg"},{"name":"column","comment":" Replacement of `Element.column`\n\n import Element\n import Widget.Material as Material\n\n [ Element.text \"Text 1\"\n , Element.text \"Text 2\"\n ]\n |> Widget.column Material.column\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ColumnStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"dialog","comment":" A Dialog Window.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = Submit\n | Close\n\n Element.layout\n (dialog (Material.alertDialog Material.defaultPalette)\n { title = Just \"Accept\"\n , text = \"Are you sure?\"\n , accept =\n { text = \"Accept\"\n , onPress = Just Submit\n }\n |> Just\n , dismiss =\n { text = \"Cancel\"\n , onPress = Just Close\n }\n |> Just\n }\n |> List.singleton\n |> singleModal\n )\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.DialogStyle msg -> { title : Maybe.Maybe String.String, text : String.String, accept : Maybe.Maybe (Widget.TextButton msg), dismiss : Maybe.Maybe (Widget.TextButton msg) } -> Widget.Modal msg"},{"name":"divider","comment":" A divider.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.DividerStyle msg) msg -> Widget.Item msg"},{"name":"expansionItem","comment":" An expandable Item\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n Toggle Bool\n\n let\n isExpanded : Bool\n isExpanded =\n True\n in\n ( ( Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n }\n )\n :: Widget.expansionItem (Material.expansionItem Material.defaultPalette )\n { onToggle = Toggle\n , isExpanded = isExpanded\n , icon = always Element.none\n , text = \"Expandable Item\"\n , content =\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n }\n ]\n }\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ExpansionItemStyle msg -> { icon : Widget.Icon msg, text : String.String, onToggle : Basics.Bool -> msg, content : List.List (Widget.Item msg), isExpanded : Basics.Bool } -> List.List (Widget.Item msg)"},{"name":"floatColumn","comment":" A Column containing a Float\n","type":"{ title : String.String, value : a -> Basics.Float, toString : Basics.Float -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"fullBleedItem","comment":" A text item spanning the full width.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , Widget.divider (Material.fullBleedDivider Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.FullBleedItemStyle msg) msg -> { text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg } -> Widget.Item msg"},{"name":"headerItem","comment":" A header for a part of a list.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.HeaderStyle msg) msg -> String.String -> Widget.Item msg"},{"name":"iconButton","comment":" A button containing only an icon, the text is used for screenreaders.\n\n import Widget.Material as Material\n import Material.Icons as MaterialIcons\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon as Icon\n\n type Msg\n = Like\n\n iconButton (Material.iconButton Material.defaultPalette)\n { text = \"Like\"\n , icon = MaterialIcons.favorite |> Icon.elmMaterialIcons Color\n , onPress = Just Like\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { text : String.String, icon : Widget.Icon msg, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"imageItem","comment":" A clickable item that contains a image , a line of text and some additonal information\n\n import Element\n import Widget.Material as Material\n import Widget.Material.Color as MaterialColor\n import Element.Font as Font\n\n [ Widget.imageItem (Material.imageItem Material.defaultPalette)\n { onPress = Nothing\n , image =\n Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ]\n { src = \"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png\"\n , description = \"Elm logo\"\n }\n , text = \"Item with Image\"\n , content =\n \\{ size, color } ->\n \"1.\"\n |> Element.text\n |> Element.el\n [ Font.color <| MaterialColor.fromColor color\n , Font.size size\n ]\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.ImageItemStyle msg) msg -> { text : String.String, onPress : Maybe.Maybe msg, image : Element.Element msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"insetItem","comment":" A clickable item that contains two spots for icons or additional information and a single line of text.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.insetItem (Material.insetItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content = always Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.insetItem (Material.insetItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content = always Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.InsetItemStyle msg) msg -> { text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"intColumn","comment":" A Column containing a Int\n","type":"{ title : String.String, value : a -> Basics.Int, toString : Basics.Int -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"itemList","comment":" Implementation of the Material design list\n\n import Element\n import Widget.Material as Material\n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ColumnStyle msg -> List.List (Widget.Item msg) -> Element.Element msg"},{"name":"menuBar","comment":" A app bar with a menu button on the left side.\n\nThis should be the default way to display the app bar. Specially for Phone users.\n\n import Element exposing (DeviceClass(..))\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n selected : Int\n selected = 0\n\n Widget.menuBar style.tabBar\n { title =\n \"Title\"\n |> Element.text\n |> Element.el Typography.h6\n , deviceClass = Phone\n , openRightSheet = Nothing\n , openTopSheet = Nothing\n , primaryActions =\n [ { icon =\n Material.Icons.change_history\n |> Icon.elmMaterialIcons Color\n , text = \"Action\"\n , onPress = Nothing\n }\n ]\n , search = Nothing\n }\n\n","type":"Widget.AppBarStyle { menuIcon : Widget.Icon msg, title : List.List (Element.Attribute msg) } msg -> { title : Element.Element msg, deviceClass : Element.DeviceClass, openLeftSheet : Maybe.Maybe msg, openRightSheet : Maybe.Maybe msg, openTopSheet : Maybe.Maybe msg, primaryActions : List.List (Widget.Button msg), search : Maybe.Maybe (Widget.TextInput msg) } -> Element.Element msg"},{"name":"multiLineItem","comment":" A item contining a text running over multiple lines.\n\n import Element\n import Widget.Material as Material\n\n [ Widget.multiLineItem (Material.multiLineItem Material.defaultPalette)\n { title = \"Title\"\n , onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content = always Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.MultiLineItemStyle msg) msg -> { title : String.String, text : String.String, onPress : Maybe.Maybe msg, icon : Widget.Icon msg, content : Widget.Icon msg } -> Widget.Item msg"},{"name":"multiModal","comment":" Same implementation as `singleModal` but also displays the \"queued\" modals.\n\n import Element\n\n type Msg\n = Close\n\n Element.layout\n (multiModal\n [ { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n ]\n )\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"List.List { onDismiss : Maybe.Maybe msg, content : Element.Element msg } -> List.List (Element.Attribute msg)"},{"name":"multiSelect","comment":" Selects multible options. This can be used for checkboxes.\n\n import Widget.Material as Material\n import Set\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = [1,2] |> Set.fromList\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.multiSelect\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.MultiSelect msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"row","comment":" Replacement of `Element.row`\n\n import Element\n import Widget.Material as Material\n\n [ Element.text \"Text 1\"\n , Element.text \"Text 2\"\n ]\n |> Widget.row Material.row\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.RowStyle msg -> List.List (Element.Element msg) -> Element.Element msg"},{"name":"select","comment":" Selects one out of multiple options. This can be used for radio buttons or Menus.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = Just 1\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.select\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.Select msg -> List.List ( Basics.Bool, Widget.Button msg )"},{"name":"selectButton","comment":" A simple button that can be selected.\n\n import Widget.Material as Material\n import Element\n\n type Msg\n = ChangedSelected Int\n\n { selected = Just 1\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just <| ChangedSelected i)\n }\n |> Widget.select\n |> Widget.buttonRow\n { elementRow = Material.buttonRow\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> ( Basics.Bool, Widget.Button msg ) -> Element.Element msg"},{"name":"selectItem","comment":" Displays a selection of Buttons as a item list. This is intended to be used as a menu.\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n ( { selected = Just 1\n , options =\n [ \"Option 1\", \"Option 2\" ]\n |> List.map\n (\\text ->\n { text = text\n , icon = always Element.none\n }\n )\n , onSelect = (\\int ->\n int\n |> Select\n |> Just\n )\n }\n |> Widget.selectItem (Material.selectItem Material.defaultPalette)\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ItemStyle (Widget.ButtonStyle msg) msg -> Widget.Select msg -> List.List (Widget.Item msg)"},{"name":"singleModal","comment":" A modal showing a single element.\n\nMaterial design only allows one element at a time to be viewed as a modal.\nTo make things easier, this widget only views the first element of the list.\nThis way you can see the list as a queue of modals.\n\n import Element\n\n type Msg\n = Close\n\n Element.layout\n (singleModal\n [ { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n ]\n )\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\nTechnical Remark:\n\n - To stop the screen from scrolling, set the height of the layout to the height of the screen.\n\n","type":"List.List { onDismiss : Maybe.Maybe msg, content : Element.Element msg } -> List.List (Element.Attribute msg)"},{"name":"sortTable","comment":" A table where the rows can be sorted by columns\n\n import Widget.Material as Material\n import Element\n\n type Msg =\n ChangedSorting String\n\n sortBy : String\n sortBy =\n \"Id\"\n\n asc : Bool\n asc =\n True\n\n Widget.sortTable (Material.sortTable Material.defaultPalette)\n { content =\n [ { id = 1, name = \"Antonio\", rating = 2.456, hash = Nothing }\n , { id = 2, name = \"Ana\", rating = 1.34, hash = Just \"45jf\" }\n , { id = 3, name = \"Alfred\", rating = 4.22, hash = Just \"6fs1\" }\n , { id = 4, name = \"Thomas\", rating = 3, hash = Just \"k52f\" }\n ]\n , columns =\n [ Widget.intColumn\n { title = \"Id\"\n , value = .id\n , toString = \\int -> \"#\" ++ String.fromInt int\n , width = Element.fill\n }\n , Widget.stringColumn\n { title = \"Name\"\n , value = .name\n , toString = identity\n , width = Element.fill\n }\n , Widget.floatColumn\n { title = \"Rating\"\n , value = .rating\n , toString = String.fromFloat\n , width = Element.fill\n }\n , Widget.unsortableColumn\n { title = \"Hash\"\n , toString = (\\{hash} -> hash |> Maybe.withDefault \"None\")\n , width = Element.fill\n }\n ]\n , asc = asc\n , sortBy = sortBy\n , onChange = ChangedSorting\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.SortTableStyle msg -> { content : List.List a, columns : List.List (Widget.Column a), sortBy : String.String, asc : Basics.Bool, onChange : String.String -> msg } -> Element.Element msg"},{"name":"stringColumn","comment":" A Column containing a String\n\n`value >> toString` field will be used for displaying the content.\n\n`value` will be used for comparing the content\n\nFor example `value = String.toLower` will make the sorting case-insensitive.\n\n","type":"{ title : String.String, value : a -> String.String, toString : String.String -> String.String, width : Element.Length } -> Widget.Column a"},{"name":"switch","comment":" A boolean switch\n\n import Widget.Material as Material\n\n type Msg\n = Activate\n\n switch (Material.switch Material.defaultPalette)\n { description = \"Activate Dark Mode\"\n , onPress = Just Activate\n , active = False\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.SwitchStyle msg -> { description : String.String, onPress : Maybe.Maybe msg, active : Basics.Bool } -> Element.Element msg"},{"name":"tab","comment":" Displayes a list of contents in a tab\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n ChangedTab Int\n\n selected : Maybe Int\n selected =\n Just 0\n\n Widget.tab (Material.tab Material.defaultPalette)\n { tabs =\n { selected = selected\n , options =\n [ 1, 2, 3 ]\n |> List.map\n (\\int ->\n { text = \"Tab \" ++ (int |> String.fromInt)\n , icon = always Element.none\n }\n )\n , onSelect =\n (\\s ->\n if s >= 0 && s <= 2 then\n Just (ChangedTab s)\n else\n Nothing\n )\n }\n , content =\n (\\s ->\n case s of\n Just 0 ->\n \"This is Tab 1\" |> Element.text\n Just 1 ->\n \"This is the second tab\" |> Element.text\n Just 2 ->\n \"The thrid and last tab\" |> Element.text\n _ ->\n \"Please select a tab\" |> Element.text\n )\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.TabStyle msg -> { tabs : Widget.Select msg, content : Maybe.Maybe Basics.Int -> Element.Element msg } -> Element.Element msg"},{"name":"tabBar","comment":" A app bar with tabs instead of a menu.\n\nThis is should be used for big screens.\n\nIt should be avoided for smaller screens or if you have more then 4 tabs\n\n import Element exposing (DeviceClass(..))\n import Widget.Material as Material\n\n type Msg =\n Select Int\n\n selected : Int\n selected = 0\n\n Widget.tabBar style.tabBar\n { title =\n \"Title\"\n |> Element.text\n |> Element.el Typography.h6\n , menu =\n { selected = Just selected\n , options =\n [ \"Home\", \"About\" ]\n |> List.map\n (\\string ->\n { text = string\n , icon = always Element.none\n }\n )\n , onSelect = \\int -> int |> Select |> Just\n }\n , deviceClass = Phone\n , openRightSheet = Nothing\n , openTopSheet = Nothing\n , primaryActions =\n [ { icon =\n Material.Icons.change_history\n |> Icon.elmMaterialIcons Color\n , text = \"Action\"\n , onPress = Nothing\n }\n ]\n , search = Nothing\n }\n\n","type":"Widget.AppBarStyle { menuTabButton : Widget.ButtonStyle msg, title : List.List (Element.Attribute msg) } msg -> { title : Element.Element msg, menu : Widget.Select msg, deviceClass : Element.DeviceClass, openRightSheet : Maybe.Maybe msg, openTopSheet : Maybe.Maybe msg, primaryActions : List.List (Widget.Button msg), search : Maybe.Maybe (Widget.TextInput msg) } -> Element.Element msg"},{"name":"textButton","comment":" A button with just text and not icon.\n\n import Widget.Material as Material\n\n type Msg\n = Like\n\n textButton (Material.textButton Material.defaultPalette)\n { text = \"Like\"\n , onPress = Just Like\n }\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.ButtonStyle msg -> { textButton | text : String.String, onPress : Maybe.Maybe msg } -> Element.Element msg"},{"name":"textInput","comment":" A text Input that allows to include chips.\n\n import Element\n import Widget.Material as Material\n\n type Msg =\n ToggleTextInputChip String\n | SetTextInput String\n\n {text = \"Hello World\"}\n |> (\\model ->\n { chips =\n [ \"Cat\", \"Fish\", \"Dog\"]\n |> List.map\n (\\string ->\n { icon = always Element.none\n , text = string\n , onPress =\n string\n |> ToggleTextInputChip\n |> Just\n }\n )\n , text = model.text\n , placeholder = Nothing\n , label = \"Chips\"\n , onChange = SetTextInput\n }\n )\n |> Widget.textInput (Material.textInput Material.defaultPalette)\n |> always \"Ignore this line\" --> \"Ignore this line\"\n\n","type":"Widget.TextInputStyle msg -> { chips : List.List (Widget.Button msg), text : String.String, placeholder : Maybe.Maybe (Element.Input.Placeholder msg), label : String.String, onChange : String.String -> msg } -> Element.Element msg"},{"name":"unsortableColumn","comment":" An unsortable Column, when trying to sort by this column, nothing will change.\n","type":"{ title : String.String, toString : a -> String.String, width : Element.Length } -> Widget.Column a"}],"binops":[]},{"name":"Widget.Customize","comment":" Each and every widget can be customized by modifing the Style Type.\n\n {- Make a button fill the full width -}\n Widget.textButton\n ( Material.containedButton\n |> (\\record ->\n { record\n | element = record.element ++ [Element.width Element.fill]\n }\n )\n )\n { onPress = Just PressedButton\n , text = \"Press Button\"\n }\n\nThis module will contain helpfull functions to make customization easier.\n\n {- Make a button fill the full width -}\n Widget.textButton\n ( Material.containedButton\n |> Customize.element [Element.width Element.fill]\n )\n { onPress = Just PressedButton\n , text = \"Press Button\"\n }\n\n\n# Element\n\nA simple style type would be the following:\n\n type alias MyStyle =\n { element : List (Attribute msg) }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <| Element.none\n\n@docs element, mapElement\n\nA styling for a simple Elm-Ui button would be like this:\n\n type alias MyStyle =\n { elementButton : List (Attribute msg) }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.button style.elementButton\n { onPress = Just Something\n , label = Element.none\n }\n\n@docs elementButton, mapElementButton\n\n@docs elementColumn, mapElementColumn\n\n@docs elementRow, mapElementRow\n\n@docs elementTable, mapElementTable\n\n@docs elementTextInput, mapElementTextInput\n\n\n# Content\n\nWe can also style the content of an element.\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , content : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <|\n Element.el style.content <|\n Element.none\n\n@docs content, mapContent\n\nIf the content is just a text (or paragraph), then we use `contentText` instead:\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , contentText : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el style.element <|\n Element.text style.contentText <|\n \"Hello World\"\n\n@docs contentText, mapContentText\n\nIf some content is infront, we use `contentInFront`:\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , content : List (Attribute msg)\n , contentInFront : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Element msg\n myWidget style =\n Element.el\n (style.element\n ++ [ Element.contentInFront <|\n Element.el style.contentInFront <|\n Element.none\n ]\n )\n <|\n Element.el style.contentInFront <|\n Element.none\n\n@docs contentInFront, mapContentInFront\n\n\n# Conditional Styling\n\nWe can include styling that depends on some state.\n\n type alias MyStyle =\n { element : List (Attribute msg)\n , ifDisabled : List (Attribute msg)\n , otherwise : List (Attribute msg)\n }\n\n myWidget : MyStyle -> Bool -> Element msg\n myWidget style isDisabled =\n Element.el\n (style.element\n ++ (if isDisabled then\n style.ifDisabled\n\n else\n style.otherwise\n )\n )\n <|\n Element.none\n\n@docs otherwise, mapOtherwise\n\n@docs ifActive, mapIfActive\n\n@docs ifDisabled, mapIfDisabled\n\n@docs ifFirst, mapIfFirst\n\n@docs ifLast, mapIfLast\n\n","unions":[],"aliases":[],"values":[{"name":"content","comment":" ","type":"List.List b -> { a | content : List.List b } -> { a | content : List.List b }"},{"name":"contentInFront","comment":" ","type":"List.List b -> { a | contentInFront : List.List b } -> { a | contentInFront : List.List b }"},{"name":"contentText","comment":" ","type":"List.List b -> { a | contentText : List.List b } -> { a | contentText : List.List b }"},{"name":"element","comment":" ","type":"List.List b -> { a | element : List.List b } -> { a | element : List.List b }"},{"name":"elementButton","comment":" ","type":"List.List b -> { a | elementButton : List.List b } -> { a | elementButton : List.List b }"},{"name":"elementColumn","comment":" ","type":"List.List b -> { a | elementColumn : List.List b } -> { a | elementColumn : List.List b }"},{"name":"elementRow","comment":" ","type":"List.List b -> { a | elementRow : List.List b } -> { a | elementRow : List.List b }"},{"name":"elementTable","comment":" ","type":"List.List b -> { a | elementTable : List.List b } -> { a | elementTable : List.List b }"},{"name":"elementTextInput","comment":" ","type":"List.List b -> { a | elementTextInput : List.List b } -> { a | elementTextInput : List.List b }"},{"name":"ifActive","comment":" ","type":"List.List b -> { a | ifActive : List.List b } -> { a | ifActive : List.List b }"},{"name":"ifDisabled","comment":" ","type":"List.List b -> { a | ifDisabled : List.List b } -> { a | ifDisabled : List.List b }"},{"name":"ifFirst","comment":" ","type":"List.List b -> { a | ifFirst : List.List b } -> { a | ifFirst : List.List b }"},{"name":"ifLast","comment":" ","type":"List.List b -> { a | ifLast : List.List b } -> { a | ifLast : List.List b }"},{"name":"mapContent","comment":" ","type":"(b -> b) -> { a | content : b } -> { a | content : b }"},{"name":"mapContentInFront","comment":" ","type":"(b -> b) -> { a | contentInFront : b } -> { a | contentInFront : b }"},{"name":"mapContentText","comment":" ","type":"(b -> b) -> { a | contentText : b } -> { a | contentText : b }"},{"name":"mapElement","comment":" ","type":"(b -> b) -> { a | element : b } -> { a | element : b }"},{"name":"mapElementButton","comment":" ","type":"(b -> b) -> { a | elementButton : b } -> { a | elementButton : b }"},{"name":"mapElementColumn","comment":" ","type":"(b -> b) -> { a | elementColumn : b } -> { a | elementColumn : b }"},{"name":"mapElementRow","comment":" ","type":"(b -> b) -> { a | elementRow : b } -> { a | elementRow : b }"},{"name":"mapElementTable","comment":" ","type":"(b -> b) -> { a | elementTable : b } -> { a | elementTable : b }"},{"name":"mapElementTextInput","comment":" ","type":"(b -> b) -> { a | elementTextInput : b } -> { a | elementTextInput : b }"},{"name":"mapIfActive","comment":" ","type":"(b -> b) -> { a | ifActive : b } -> { a | ifActive : b }"},{"name":"mapIfDisabled","comment":" ","type":"(b -> b) -> { a | ifDisabled : b } -> { a | ifDisabled : b }"},{"name":"mapIfFirst","comment":" ","type":"(b -> b) -> { a | ifFirst : b } -> { a | ifFirst : b }"},{"name":"mapIfLast","comment":" ","type":"(b -> b) -> { a | ifLast : b } -> { a | ifLast : b }"},{"name":"mapOtherwise","comment":" ","type":"(b -> b) -> { a | otherwise : b } -> { a | otherwise : b }"},{"name":"otherwise","comment":" ","type":"List.List b -> { a | otherwise : List.List b } -> { a | otherwise : List.List b }"}],"binops":[]},{"name":"Widget.Icon","comment":" This module ensures that every icon package on package.elm-lang.org is supported.\n\nJust look for the function with the name of the package and copy&paste the respective example.\n\n@docs IconStyle, Icon\n\n@docs antDesignIconsElm, elmFeather, elmFontawesome, elmHeroicons, elmIonicons, elmMaterialIcons, elmOcticons, elmZondicons, materialIcons\n\n","unions":[],"aliases":[{"name":"Icon","comment":" ","args":["msg"],"type":"{ size : Basics.Int, color : Color.Color } -> Element.Element msg"},{"name":"IconStyle","comment":" ","args":[],"type":"{ size : Basics.Int, color : Color.Color }"}],"values":[{"name":"antDesignIconsElm","comment":" For using [lemol/ant-design-icons-elm](https://dark.elm.dmy.fr/packages/lemol/ant-design-icons-elm/latest)\n\n import Ant.Icons.Svg\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Ant.Icons.Svg.checkOutlined\n |> Widget.Icon.antDesignIconsElm\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmFeather","comment":" For using [feathericons/elm-feather](https://dark.elm.dmy.fr/packages/feathericons/elm-feather/latest/)\n\n import FeatherIcons\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n FeatherIcons.check\n |> Widget.Icon.elmFeather FeatherIcons.toHtml\n\n","type":"(List.List (Svg.Attribute msg) -> icon -> Html.Html msg) -> icon -> Widget.Icon.Icon msg"},{"name":"elmFontawesome","comment":" For using [lattyware/elm-fontawesome](https://dark.elm.dmy.fr/packages/lattyware/elm-fontawesome/latest)\n\n import FontAwesome.Icon\n import FontAwesome.Solid\n import FontAwesome.Svg\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n FontAwesome.Solid.check\n |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon\n\n","type":"(icon -> Svg.Svg msg) -> icon -> Widget.Icon.Icon msg"},{"name":"elmHeroicons","comment":" For using [jasonliang-dev/elm-heroicons](https://dark.elm.dmy.fr/packages/jasonliang-dev/elm-heroicons/latest)\n\n import Heroicons.Solid\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Heroicons.Solid.check\n |> Widget.Icon.elmHeroicons\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmIonicons","comment":" For using [j-panasiuk/elm-ionicons](https://dark.elm.dmy.fr/packages/j-panasiuk/elm-ionicons/latest/)\n\n import Ionicon\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Ionicon.checkmark\n |> Widget.Icon.elmIonicons\n\n","type":"(Basics.Int -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float } -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmMaterialIcons","comment":" For using [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest/)\n\n import Material.Icons exposing (offline_bolt)\n import Material.Icons.Types exposing (Coloring(..))\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Material.Icons.done\n |> Widget.Icon.elmMaterialIcons Color\n\n","type":"(Color.Color -> coloring) -> (Basics.Int -> coloring -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmOcticons","comment":" For using [capitalist/elm-octicons](https://dark.elm.dmy.fr/packages/capitalist/elm-octicons/latest)\n\n import Octicons\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Octicons.check\n |> Widget.Icon.elmOcticons\n { withSize = Octicons.size\n , withColor = Octicons.color\n , defaultOptions = Octicons.defaultOptions\n }\n\n","type":"{ withSize : Basics.Int -> options -> options, withColor : String.String -> options -> options, defaultOptions : options } -> (options -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"elmZondicons","comment":" For using [pehota/elm-zondicons](https://dark.elm.dmy.fr/packages/pehota/elm-zondicons/latest)\n\n import Widget.Icon exposing (Icon)\n import Zondicons\n\n check : Widget.Icon\n check =\n Zondicons.checkmark\n |> Widget.Icon.elmZondicons\n\n","type":"(List.List (Svg.Attribute msg) -> Html.Html msg) -> Widget.Icon.Icon msg"},{"name":"materialIcons","comment":" For using [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/)\n\n import Material.Icons.Action\n import Widget.Icon exposing (Icon)\n\n check : Widget.Icon\n check =\n Material.Icons.Action.done\n |> Widget.Icon.materialIcons\n\n","type":"(Color.Color -> Basics.Int -> Svg.Svg msg) -> Widget.Icon.Icon msg"}],"binops":[]},{"name":"Widget.Layout","comment":" Combines multiple concepts from the [material design specification](https://material.io/components/), namely:\n\n - Top App Bar\n - Navigation Draw\n - Side Panel\n - Dialog\n - Snackbar\n\nIt is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).\n\n![Layout](https://orasund.github.io/elm-ui-widgets/assets/layout.png)\n\n\n# Sheets\n\n![Sheet](https://orasund.github.io/elm-ui-widgets/assets/sheet.png)\n\n@docs leftSheet, rightSheet, searchSheet\n\n\n# Utility Functions\n\n@docs getDeviceClass, partitionActions, orderModals\n\n","unions":[],"aliases":[],"values":[{"name":"getDeviceClass","comment":" obtain the Device Calss from a given window.\n\nCheckout Element.classifyDevice for more information.\n\n","type":"{ height : Basics.Int, width : Basics.Int } -> Element.DeviceClass"},{"name":"leftSheet","comment":" Left sheet containing a title and a menu.\n","type":"{ button : Internal.Item.ItemStyle (Internal.Button.ButtonStyle msg) msg, sheet : Internal.List.ColumnStyle msg } -> { title : Element.Element msg, menu : Internal.Select.Select msg, onDismiss : msg } -> Internal.Modal.Modal msg"},{"name":"orderModals","comment":" Material design only allows one element at a time to be visible as modal.\n\nThe order from most important to least important is as follows:\ndialog -> top sheet -> bottom sheet -> left sheet -> right sheet\n\n","type":"{ dialog : Maybe.Maybe (Internal.Modal.Modal msg), topSheet : Maybe.Maybe (Internal.Modal.Modal msg), bottomSheet : Maybe.Maybe (Internal.Modal.Modal msg), leftSheet : Maybe.Maybe (Internal.Modal.Modal msg), rightSheet : Maybe.Maybe (Internal.Modal.Modal msg) } -> List.List (Internal.Modal.Modal msg)"},{"name":"partitionActions","comment":" partitions actions into primary and additional actions.\n\nIt is intended to hide the additional actions in a side menu.\n\n","type":"List.List (Internal.Button.Button msg) -> { primaryActions : List.List (Internal.Button.Button msg), moreActions : List.List (Internal.Button.Button msg) }"},{"name":"rightSheet","comment":" Right sheet containg a simple list of buttons\n","type":"{ sheet : Internal.List.ColumnStyle msg, insetItem : Internal.Item.ItemStyle (Internal.Item.InsetItemStyle msg) msg } -> { onDismiss : msg, moreActions : List.List (Internal.Button.Button msg) } -> Internal.Modal.Modal msg"},{"name":"searchSheet","comment":" Top sheet containg a searchbar spaning the full witdh\n","type":"Internal.TextInput.TextInputStyle msg -> { onDismiss : msg, search : Internal.TextInput.TextInput msg } -> Internal.Modal.Modal msg"}],"binops":[]},{"name":"Widget.Material","comment":" ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)\n\nThis module implements a Material design theme for all widgets.\n\nThe stylings are following [the official Material Design guidelines](https://material.io/components) as close as possible.\nPlease use these widgets in combination with the official guidelines.\n\nThe typograpahy is taken from [the material design guidelines](https://material.io/design/typography/the-type-system.html#type-scale).\nIts recommended to use a font size of 16px width and the [Roboto Font](https://fonts.google.com/specimen/Roboto?query=Ro).\n\nThe style are not opaque, so you can change every styling to your needs.\n\nIf you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos.\n\n\n# Palette\n\n@docs Palette, defaultPalette, darkPalette\n\n\n# Button\n\nDifferent styles for buttons have different meanings.\n\n - Use `textButton` as your default button\n - Use `containedButton` for any important action\n - Use `outlinedButton` if you have more then one important action.\n Use `containedButton` for **the most** important action of the group.\n\n@docs containedButton, outlinedButton, textButton\n\n@docs iconButton, toggleButton, buttonRow\n\n\n# Switch\n\n@docs switch\n\n\n# Card\n\nIn the material design specification the card is not really specified at all.\nIm practice the List seams more useful then a own card widget.\nThus for now we only provide a card containing a list.\n\n@docs cardColumn\n\n\n# Chip\n\n@docs chip, textInput\n\n\n# Dialog\n\n@docs alertDialog\n\n\n# List\n\n@docs row, column\n\n\n# App Bar\n\n@docs menuBar, tabBar\n\n\n# Sheet\n\n@docs sideSheet, bottomSheet\n\n\n# Item\n\nA List is build from items.\nYou way want to use special items to visually organize the content of your list.\n\n@docs fullBleedItem, insetItem, multiLineItem, imageItem, expansionItem, selectItem\n@docs fullBleedDivider, insetDivider, middleDivider\n@docs fullBleedHeader, insetHeader\n\n\n# Progress Indicator\n\n@docs progressIndicator\n\n\n# Sort Table\n\n@docs sortTable\n\n\n# Snackbar\n\n@docs snackbar\n\n\n# Tab\n\n@docs tab, tabButton\n\n\n# Advanced\n\nTo create your own Material Widgets, here are all internal functions.\nNote that you might want to checkout the [file on GitHub](https://github.com/Orasund/elm-ui-widgets/blob/master/src/Widget/Style/Material.elm) if you want to tweak some internal behaviour.\n\n","unions":[],"aliases":[{"name":"Palette","comment":" The material design comes with customizable color palettes.\n\nCheck out [the official documentation about the color system](https://material.io/design/color/the-color-system.html#color-theme-creation) to see how these colors are used.\n\nFor the `-on` colors you can use white, for transitions into white, or black,for transitions into black. Other colors are also possible, but i've not seen any website acutally using a different color.\n\n","args":[],"type":"{ primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color, on : { primary : Color.Color, secondary : Color.Color, background : Color.Color, surface : Color.Color, error : Color.Color } }"}],"values":[{"name":"alertDialog","comment":" An alert dialog for important decisions. Use a snackbar for less important notification.\n","type":"Widget.Material.Palette -> Internal.Dialog.DialogStyle msg"},{"name":"bottomSheet","comment":" A bottom sheet. Has a maximal width of 360.\nShould be align to the bottom right corner of the screen.\n","type":"Widget.Material.Palette -> Internal.List.ColumnStyle msg"},{"name":"buttonRow","comment":" a Row of buttons.\n\nOnly use in combination with `toggleButton`\n\n","type":"Internal.List.RowStyle msg"},{"name":"cardColumn","comment":" A List styled like a card.\n\nTechnical Remark:\n\nThis is a simplification of the [Material Design Card\n](https://material.io/components/cards) and might get replaced at a later date.\n\n","type":"Widget.Material.Palette -> Internal.List.ColumnStyle msg"},{"name":"chip","comment":" Chips have the same behaviour as buttons but are visually less important.\n\nIn the [official documentation](https://material.io/components/chips#types) chips have different names depending on where they are used:\n\n - **Input Chips** are used inside a text field. Use `textInput` for this feature.\n - **Choice Chips** are used for selcting an option.\n The material design guidelines recommend using `toggleButton` for icons with no text and chips for text with no icons.\n - **Filter Chips** are used for selecting multiple options. They typically have a done-icon when selected.\n - **Action chips** are like button. Make sure to include an icon when using action chips.\n\nTechnical Remark:\n\n - Desided against the implementation of an outlined chip.\n Please open a new issue or a PR if you want to have it implemented.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"column","comment":" A simple styling for a column.\n","type":"Internal.List.ColumnStyle msg"},{"name":"containedButton","comment":" A contained button representing the most important action of a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"darkPalette","comment":" The offical dark theme of google.\n\n![The dark theme](https://lh3.googleusercontent.com/tv7J2o4ZiSmLYwyBslBs_PLzKyzI8QUV5qdvHGfoAQn9r7pY4Hj5SmW27m3zUWeDtRSE8Cb5_5PQmkbavDfw7XbIL8EodIKZhilRdg=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/dark-theme.html#ui-application)_\n\n","type":"Widget.Material.Palette"},{"name":"defaultPalette","comment":" The default color theme.\n\n![The default theme](https://lh3.googleusercontent.com/k6WO1fd7T40A9JvSVfHqs0CPLFyTEDCecsVGxEDhOaTP0wUTPYOVVkxt60hKxBprgNoMqs8OyKqtlaQ4tDBtQJs-fTcZrpZEjxhUVQ=w1064-v0)\n\n_Image take from [material.io](https://material.io/design/color/the-color-system.html#color-theme-creation)_\n\n","type":"Widget.Material.Palette"},{"name":"expansionItem","comment":" An expandable item.\n\nTechnical Remarks:\n\n - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).\n\n","type":"Widget.Material.Palette -> Internal.Item.ExpansionItemStyle msg"},{"name":"fullBleedDivider","comment":" A divider covering the full length\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"fullBleedHeader","comment":" A header of a section of a list. Comes with a full bleed divider.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg"},{"name":"fullBleedItem","comment":" A basic item containg some text, a button. Spans the full width.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.FullBleedItemStyle msg) msg"},{"name":"iconButton","comment":" An single selectable icon.\n\nTechnical Remark:\n\n - Could not find any specification details\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"imageItem","comment":" Similar to a textItem but with an image instead of the icon.\n\nIf the image is bigger then 40x40, the size of the item will change.\n\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.ImageItemStyle msg) msg"},{"name":"insetDivider","comment":" A divider covering only parts of the width\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"insetHeader","comment":" A header of a section of a list. Comes with a inset divider.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg"},{"name":"insetItem","comment":" A basic item containg some text, a button and some additional information.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.InsetItemStyle msg) msg"},{"name":"menuBar","comment":" An app bar with a menu on the left side\n","type":"Widget.Material.Palette -> Internal.AppBar.AppBarStyle { menuIcon : Widget.Icon.Icon msg, title : List.List (Element.Attribute msg) } msg"},{"name":"middleDivider","comment":" A divider in the center\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg"},{"name":"multiLineItem","comment":" A text item allowing for more text.\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Item.MultiLineItemStyle msg) msg"},{"name":"outlinedButton","comment":" A outlined button representing an important action within a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"progressIndicator","comment":" A circular progress indicator\n","type":"Widget.Material.Palette -> Internal.ProgressIndicator.ProgressIndicatorStyle msg"},{"name":"row","comment":" A simple styling for a row.\n","type":"Internal.List.RowStyle msg"},{"name":"selectItem","comment":" Displays a selection. This should be combined with Widget.selectItem\n","type":"Widget.Material.Palette -> Internal.Item.ItemStyle (Internal.Button.ButtonStyle msg) msg"},{"name":"sideSheet","comment":" A side sheet. Has a maximal width of 360.\n","type":"Widget.Material.Palette -> Internal.List.ColumnStyle msg"},{"name":"snackbar","comment":" A typical snackbar\n\nTechnical Remark:\n\n - The text color of the button was not given in the specification. This implementation\n adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)\n\n","type":"Widget.Material.Palette -> Widget.Snackbar.SnackbarStyle msg"},{"name":"sortTable","comment":" A sortable table\n","type":"Widget.Material.Palette -> Internal.SortTable.SortTableStyle msg"},{"name":"switch","comment":" A boolean switch\n\nTechnical Remark:\n\n - The specification states that the disabled switch should have a color dependend on its activness. This is not implemented.\n\n","type":"Widget.Material.Palette -> Internal.Switch.SwitchStyle msg"},{"name":"tab","comment":" A Tab bar meant for only the upper most level. Do not use a tab within a tab.\n","type":"Widget.Material.Palette -> Internal.Tab.TabStyle msg"},{"name":"tabBar","comment":" An app bar with tabs instead of a menu\n","type":"Widget.Material.Palette -> Internal.AppBar.AppBarStyle { menuTabButton : Internal.Button.ButtonStyle msg, title : List.List (Element.Attribute msg) } msg"},{"name":"tabButton","comment":" A single Tab button.\n\nTechnical Remark:\n\n - The official specification states that the background color should be the surface color,\n but the pictures and actuall implementations all have no background color.\n So here the background color is also not set.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"textButton","comment":" A text button representing a simple action within a group.\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"},{"name":"textInput","comment":" A text input style that is included only to support input chips.\n\nTechnical Remark:\n\n - This is just a temporary implementation. It will soon be replaced with the official implementation.\n\n","type":"Widget.Material.Palette -> Internal.TextInput.TextInputStyle msg"},{"name":"toggleButton","comment":" A ToggleButton. Only use as a group in combination with `buttonRow`.\n\nToggle buttons should only be used with the `iconButton` widget, else use chips instead.\n\nTechnical Remark:\n\n - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)\n - There are two different versions, one where the selected color is gray and another where the color is primary.\n I noticed the gray version was used more often, so i went with that one.\n\n","type":"Widget.Material.Palette -> Internal.Button.ButtonStyle msg"}],"binops":[]},{"name":"Widget.Material.Color","comment":" This module contains functions to adapt color in various ways.\n\nWe use the CIELCH color space, while the material design on chrome uses sRGB.\nCIELCH colors ensure that the result of mixing colors looks natural, where as\nsRGB is optimized to mix images together.\n\nIn practice this means that in edge-cases our package will produce better results,\nthen the javascript material design implementation.\n\n\n## Opacity Constants for Buttons\n\n@docs buttonHoverOpacity, buttonFocusOpacity, buttonPressedOpacity, buttonDisabledOpacity, buttonSelectedOpacity\n\n\n## Accessibility\n\n@docs accessibleTextColor, accessibleWithTextColor\n\n\n## Shades\n\n@docs withShade, scaleOpacity\n\n\n## Predefined Colors\n\n@docs dark, gray\n\n\n## Utility Functions\n\n@docs toCIELCH, fromCIELCH, shadow, fromColor, textAndBackground\n\n","unions":[],"aliases":[],"values":[{"name":"accessibleTextColor","comment":" Returns either Black or White, depending of the input color.\n","type":"Color.Color -> Color.Color"},{"name":"accessibleWithTextColor","comment":" Returns the first color, adapted to ensure accessibility rules.\n\n accessibleTextColor bgColor =\n accessibleWithTextColor (Color.rgb255 255 255 255) bgColor\n\n","type":"Color.Color -> Color.Color -> Color.Color"},{"name":"buttonDisabledOpacity","comment":" Opacity value for a disabled button\n","type":"Basics.Float"},{"name":"buttonFocusOpacity","comment":" Opacity value for a focused button\n","type":"Basics.Float"},{"name":"buttonHoverOpacity","comment":" Opacity value for hovering over a button\n","type":"Basics.Float"},{"name":"buttonPressedOpacity","comment":" Opacity value for a pressed button\n","type":"Basics.Float"},{"name":"buttonSelectedOpacity","comment":" Opacity value for a selected button\n","type":"Basics.Float"},{"name":"dark","comment":" dark gray\n","type":"Color.Color"},{"name":"fromCIELCH","comment":" Utility function to convert CIELCH color space back to a color\n","type":"{ l : Basics.Float, c : Basics.Float, h : Basics.Float } -> Color.Color"},{"name":"fromColor","comment":" Utillity function to convert from Color to Element.Color\n","type":"Color.Color -> Element.Color"},{"name":"gray","comment":" gray\n","type":"Color.Color"},{"name":"scaleOpacity","comment":" Multiply the opacity value by a given value\n\n scaleOpacity (0.25 \\* 2) ==\n scaleOpacity 0.25 >> scaleOpacity 2\n\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"shadow","comment":" Returns a Material Design shadow\n","type":"Basics.Float -> { offset : ( Basics.Float, Basics.Float ), size : Basics.Float, blur : Basics.Float, color : Element.Color }"},{"name":"textAndBackground","comment":" applies a color the background and ensures that the font color is accessible.\n","type":"Color.Color -> List.List (Element.Attr decorative msg)"},{"name":"toCIELCH","comment":" Utility function to convert a color to CIELCH color space\n","type":"Color.Color -> { l : Basics.Float, c : Basics.Float, h : Basics.Float }"},{"name":"withShade","comment":" Simulates adding a color in front (subtractive color mixing).\n\n --Darkens the color by 50%\n withShade (Color.rgb255 255 255 255) 0.5\n\n --Makes the color 50% more red\n withShade (Color.rgb255 255 0 0) 0.5\n\n","type":"Color.Color -> Basics.Float -> Color.Color -> Color.Color"}],"binops":[]},{"name":"Widget.Material.Typography","comment":" An implementation of the Material design typography.\n\nIt is optimized for the _Roboto_ font\n\n\n## Headline\n\n@docs h1, h2, h3, h4, h5, h6\n\n\n## Subtitle\n\n@docs subtitle1, subtitle2\n\n\n## Body\n\n@docs body1, body2\n\n\n## Miscellaneous\n\n@docs button, caption, overline\n\n","unions":[],"aliases":[],"values":[{"name":"body1","comment":" Variant 1 for the default font size: 16px\n","type":"List.List (Element.Attribute msg)"},{"name":"body2","comment":" Variant 2 for the default font size: 14px\n","type":"List.List (Element.Attribute msg)"},{"name":"button","comment":" Font for Material Design buttons. Size: 14px\n","type":"List.List (Element.Attribute msg)"},{"name":"caption","comment":" Captions for Material Design. Size: 12px\n","type":"List.List (Element.Attribute msg)"},{"name":"h1","comment":" Headline 1 for Material Design. Size: 96px\n","type":"List.List (Element.Attribute msg)"},{"name":"h2","comment":" Headline 2 for Material Design. Size: 60px\n","type":"List.List (Element.Attribute msg)"},{"name":"h3","comment":" Headline 3 for Material Design. Size: 48px\n","type":"List.List (Element.Attribute msg)"},{"name":"h4","comment":" Headline 3 for Material Design. Size: 34px\n","type":"List.List (Element.Attribute msg)"},{"name":"h5","comment":" Headline 3 for Material Design. Size: 24px\n","type":"List.List (Element.Attribute msg)"},{"name":"h6","comment":" Headline 3 for Material Design. Size: 20px\n","type":"List.List (Element.Attribute msg)"},{"name":"overline","comment":" overline for Material Design. Size: 10px\n","type":"List.List (Element.Attribute msg)"},{"name":"subtitle1","comment":" Variant 1 for subtitles for Material Design. Size: 16px\n","type":"List.List (Element.Attribute msg)"},{"name":"subtitle2","comment":" Variant 2 for subtitles for Material Design. Size: 14px\n","type":"List.List (Element.Attribute msg)"}],"binops":[]},{"name":"Widget.Snackbar","comment":" ![Snackbar](https://orasund.github.io/elm-ui-widgets/assets/snackbar.png)\n\nA [snackbar](https://material.io/components/snackbars/) shows notification, one at a time.\n\n\n# Basics\n\n@docs SnackbarStyle, Snackbar, Message, init, current, timePassed, view\n\n\n# Operations\n\n@docs insert, insertFor, dismiss\n\n","unions":[],"aliases":[{"name":"Message","comment":" A message with maybe some action button\n","args":["msg"],"type":"{ text : String.String, button : Maybe.Maybe (Internal.Button.TextButton msg) }"},{"name":"Snackbar","comment":" A snackbar has a queue of Notifications, each with the amount of ms the message should be displayed\n","args":["a"],"type":"{ queue : Queue.Queue ( a, Basics.Int ), current : Maybe.Maybe ( a, Basics.Int ) }"},{"name":"SnackbarStyle","comment":" ","args":["msg"],"type":"{ elementRow : List.List (Element.Attribute msg), content : { text : { elementText : List.List (Element.Attribute msg) }, button : Internal.Button.ButtonStyle msg } }"}],"values":[{"name":"current","comment":" Returns the current element.\n","type":"Widget.Snackbar.Snackbar a -> Maybe.Maybe a"},{"name":"dismiss","comment":" Dismiss the current message.\n","type":"Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"init","comment":" Inital state\n","type":"Widget.Snackbar.Snackbar a"},{"name":"insert","comment":" Insert a message that will last for 10 seconds.\n","type":"a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"insertFor","comment":" Insert a message for a specific amount of milli seconds.\n","type":"Basics.Int -> a -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"timePassed","comment":" Updates the model. This functions should be called regularly.\nThe first argument is the milli seconds that passed since the last time the function was called.\n","type":"Basics.Int -> Widget.Snackbar.Snackbar a -> Widget.Snackbar.Snackbar a"},{"name":"view","comment":" Views the current Message. (only one at a time)\n","type":"Widget.Snackbar.SnackbarStyle msg -> (a -> Widget.Snackbar.Message msg) -> Widget.Snackbar.Snackbar a -> Maybe.Maybe (Element.Element msg)"}],"binops":[]}] \ No newline at end of file diff --git a/docs/assets/appBar.png b/docs/assets/appBar.png new file mode 100644 index 0000000..ed93074 Binary files /dev/null and b/docs/assets/appBar.png differ diff --git a/docs/assets/button.png b/docs/assets/button.png index 0c468e3..a5ea083 100644 Binary files a/docs/assets/button.png and b/docs/assets/button.png differ diff --git a/docs/assets/buttonRow.png b/docs/assets/buttonRow.png new file mode 100644 index 0000000..a3bc303 Binary files /dev/null and b/docs/assets/buttonRow.png differ diff --git a/docs/assets/dialog.png b/docs/assets/dialog.png index b6618ba..3a8436f 100644 Binary files a/docs/assets/dialog.png and b/docs/assets/dialog.png differ diff --git a/docs/assets/icon.png b/docs/assets/icon.png new file mode 100644 index 0000000..42dc48c Binary files /dev/null and b/docs/assets/icon.png differ diff --git a/docs/assets/layout.png b/docs/assets/layout.png new file mode 100644 index 0000000..29611c9 Binary files /dev/null and b/docs/assets/layout.png differ diff --git a/docs/assets/list.png b/docs/assets/list.png index 35604da..f1e0ce5 100644 Binary files a/docs/assets/list.png and b/docs/assets/list.png differ diff --git a/docs/assets/material/alertDialog.png b/docs/assets/material/alertDialog.png new file mode 100644 index 0000000..cd41386 Binary files /dev/null and b/docs/assets/material/alertDialog.png differ diff --git a/docs/assets/material/cardColumn.png b/docs/assets/material/cardColumn.png new file mode 100644 index 0000000..70aca7e Binary files /dev/null and b/docs/assets/material/cardColumn.png differ diff --git a/docs/assets/material/chip.png b/docs/assets/material/chip.png new file mode 100644 index 0000000..3dcc1c0 Binary files /dev/null and b/docs/assets/material/chip.png differ diff --git a/docs/assets/material/containedButton.png b/docs/assets/material/containedButton.png new file mode 100644 index 0000000..36f1dc0 Binary files /dev/null and b/docs/assets/material/containedButton.png differ diff --git a/docs/assets/material/expansionItem.png b/docs/assets/material/expansionItem.png new file mode 100644 index 0000000..0c47f51 Binary files /dev/null and b/docs/assets/material/expansionItem.png differ diff --git a/docs/assets/material/fullBleedDivider.png b/docs/assets/material/fullBleedDivider.png new file mode 100644 index 0000000..fb0c7cc Binary files /dev/null and b/docs/assets/material/fullBleedDivider.png differ diff --git a/docs/assets/material/fullBleedHeader.png b/docs/assets/material/fullBleedHeader.png new file mode 100644 index 0000000..14e8699 Binary files /dev/null and b/docs/assets/material/fullBleedHeader.png differ diff --git a/docs/assets/material/fullBleedItem.png b/docs/assets/material/fullBleedItem.png new file mode 100644 index 0000000..7346f17 Binary files /dev/null and b/docs/assets/material/fullBleedItem.png differ diff --git a/docs/assets/material/iconButton.png b/docs/assets/material/iconButton.png new file mode 100644 index 0000000..520e5e9 Binary files /dev/null and b/docs/assets/material/iconButton.png differ diff --git a/docs/assets/material/imageItem.png b/docs/assets/material/imageItem.png new file mode 100644 index 0000000..895923b Binary files /dev/null and b/docs/assets/material/imageItem.png differ diff --git a/docs/assets/material/insetDivider.png b/docs/assets/material/insetDivider.png new file mode 100644 index 0000000..a92f947 Binary files /dev/null and b/docs/assets/material/insetDivider.png differ diff --git a/docs/assets/material/insetHeader.png b/docs/assets/material/insetHeader.png new file mode 100644 index 0000000..ac8ad27 Binary files /dev/null and b/docs/assets/material/insetHeader.png differ diff --git a/docs/assets/material/insetItem.png b/docs/assets/material/insetItem.png new file mode 100644 index 0000000..302c30a Binary files /dev/null and b/docs/assets/material/insetItem.png differ diff --git a/docs/assets/material/menuBar.png b/docs/assets/material/menuBar.png new file mode 100644 index 0000000..ad6b26a Binary files /dev/null and b/docs/assets/material/menuBar.png differ diff --git a/docs/assets/material/middleDivider.png b/docs/assets/material/middleDivider.png new file mode 100644 index 0000000..7259771 Binary files /dev/null and b/docs/assets/material/middleDivider.png differ diff --git a/docs/assets/material/multiLineItem.png b/docs/assets/material/multiLineItem.png new file mode 100644 index 0000000..8c87170 Binary files /dev/null and b/docs/assets/material/multiLineItem.png differ diff --git a/docs/assets/material/multiSelect.png b/docs/assets/material/multiSelect.png new file mode 100644 index 0000000..6bbabd6 Binary files /dev/null and b/docs/assets/material/multiSelect.png differ diff --git a/docs/assets/material/outlinedButton.png b/docs/assets/material/outlinedButton.png new file mode 100644 index 0000000..85878a2 Binary files /dev/null and b/docs/assets/material/outlinedButton.png differ diff --git a/docs/assets/material/progressIndicator.png b/docs/assets/material/progressIndicator.png new file mode 100644 index 0000000..3c6013e Binary files /dev/null and b/docs/assets/material/progressIndicator.png differ diff --git a/docs/assets/material/selectItem.png b/docs/assets/material/selectItem.png new file mode 100644 index 0000000..722be99 Binary files /dev/null and b/docs/assets/material/selectItem.png differ diff --git a/docs/assets/material/sideSheet.png b/docs/assets/material/sideSheet.png new file mode 100644 index 0000000..f45381e Binary files /dev/null and b/docs/assets/material/sideSheet.png differ diff --git a/docs/assets/material/snackbar.png b/docs/assets/material/snackbar.png new file mode 100644 index 0000000..06c6395 Binary files /dev/null and b/docs/assets/material/snackbar.png differ diff --git a/docs/assets/material/sortTable.png b/docs/assets/material/sortTable.png new file mode 100644 index 0000000..1b3bb30 Binary files /dev/null and b/docs/assets/material/sortTable.png differ diff --git a/docs/assets/material/switch.png b/docs/assets/material/switch.png new file mode 100644 index 0000000..938fac3 Binary files /dev/null and b/docs/assets/material/switch.png differ diff --git a/docs/assets/material/tab.png b/docs/assets/material/tab.png new file mode 100644 index 0000000..bf8a499 Binary files /dev/null and b/docs/assets/material/tab.png differ diff --git a/docs/assets/material/tabBar.png b/docs/assets/material/tabBar.png new file mode 100644 index 0000000..42631c8 Binary files /dev/null and b/docs/assets/material/tabBar.png differ diff --git a/docs/assets/material/tabButton.png b/docs/assets/material/tabButton.png new file mode 100644 index 0000000..c5b2fb2 Binary files /dev/null and b/docs/assets/material/tabButton.png differ diff --git a/docs/assets/material/textButton.png b/docs/assets/material/textButton.png new file mode 100644 index 0000000..0d8ed89 Binary files /dev/null and b/docs/assets/material/textButton.png differ diff --git a/docs/assets/material/textInput.png b/docs/assets/material/textInput.png new file mode 100644 index 0000000..271db7c Binary files /dev/null and b/docs/assets/material/textInput.png differ diff --git a/docs/assets/material/toggleButton.png b/docs/assets/material/toggleButton.png new file mode 100644 index 0000000..a6f438b Binary files /dev/null and b/docs/assets/material/toggleButton.png differ diff --git a/docs/assets/modal.png b/docs/assets/modal.png index 64d11bb..0444d9b 100644 Binary files a/docs/assets/modal.png and b/docs/assets/modal.png differ diff --git a/docs/assets/multiSelect.png b/docs/assets/multiSelect.png index 9a64163..cbe4e0d 100644 Binary files a/docs/assets/multiSelect.png and b/docs/assets/multiSelect.png differ diff --git a/docs/assets/progressIndicator.png b/docs/assets/progressIndicator.png index ec9fbdc..535f66c 100644 Binary files a/docs/assets/progressIndicator.png and b/docs/assets/progressIndicator.png differ diff --git a/docs/assets/select.png b/docs/assets/select.png index e9dc0b3..5074853 100644 Binary files a/docs/assets/select.png and b/docs/assets/select.png differ diff --git a/docs/assets/sheet.png b/docs/assets/sheet.png new file mode 100644 index 0000000..43bf34e Binary files /dev/null and b/docs/assets/sheet.png differ diff --git a/docs/assets/snackbar.png b/docs/assets/snackbar.png index 49e5f55..d855a13 100644 Binary files a/docs/assets/snackbar.png and b/docs/assets/snackbar.png differ diff --git a/docs/assets/sortTable.png b/docs/assets/sortTable.png index 18fcab4..cb6b6d0 100644 Binary files a/docs/assets/sortTable.png and b/docs/assets/sortTable.png differ diff --git a/docs/assets/switch.png b/docs/assets/switch.png new file mode 100644 index 0000000..cc223e6 Binary files /dev/null and b/docs/assets/switch.png differ diff --git a/docs/assets/tab.png b/docs/assets/tab.png index 616d1cd..4a58017 100644 Binary files a/docs/assets/tab.png and b/docs/assets/tab.png differ diff --git a/docs/assets/textInput.png b/docs/assets/textInput.png index 74d6cf9..8320a98 100644 Binary files a/docs/assets/textInput.png and b/docs/assets/textInput.png differ diff --git a/elm.json b/elm.json index 004af64..0505626 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "Orasund/elm-ui-widgets", "summary": "Collection of reusable views for elm-ui.", "license": "BSD-3-Clause", - "version": "2.3.0", + "version": "3.0.0", "exposed-modules": [ "Widget", "Widget.Material", @@ -30,4 +30,4 @@ "elm-explorations/test": "1.2.1 <= v < 2.0.0", "icidasset/elm-material-icons": "5.0.0 <= v < 6.0.0" } -} \ No newline at end of file +} diff --git a/src/Widget.elm b/src/Widget.elm index 58fcb2e..1ede90c 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -8,6 +8,8 @@ module Widget exposing , RowStyle, row, buttonRow , ColumnStyle, column, buttonColumn , ItemStyle, Item + , FullBleedItemStyle, fullBleedItem + , InsetItem, InsetItemStyle, insetItem , ExpansionItemStyle, ExpansionItem, expansionItem , ImageItemStyle, ImageItem, imageItem , MultiLineItemStyle, MultiLineItem, multiLineItem @@ -20,13 +22,10 @@ module Widget exposing , TextInputStyle, TextInput, textInput , TabStyle, Tab, tab , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator - , FullBleedItemStyle, InsetItem, InsetItemStyle, fullBleedItem, insetItem ) {-| This module contains different stateless view functions. No wiring required. -These widgets should be used by defining the styling seperately: - Widget.button Material.primaryButton { text = "disable me" , icon = @@ -52,13 +51,13 @@ You can create you own widgets by sticking widgets types together. ![Button](https://orasund.github.io/elm-ui-widgets/assets/button.png) -[Open in Ellie](https://ellie-app.com/9p5QGZ3hgPLa1) - @docs ButtonStyle, Button, TextButton, iconButton, textButton, button # Switch +![Switch](https://orasund.github.io/elm-ui-widgets/assets/switch.png) + @docs SwitchStyle, Switch, switch @@ -66,19 +65,17 @@ You can create you own widgets by sticking widgets types together. ![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png) -[Open in Ellie](https://ellie-app.com/9p5QSzQDMCca1) - @docs Select, selectButton, select ![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png) -[Open in Ellie](https://ellie-app.com/9p5R5crjqfya1) - @docs MultiSelect, multiSelect # Modal +![Modal](https://orasund.github.io/elm-ui-widgets/assets/modal.png) + @docs Modal, singleModal, multiModal @@ -110,8 +107,9 @@ You can create you own widgets by sticking widgets types together. ## Item -@docs ItemStyle, FullBleedStyle, Item, item -@docs TextItemStyle, TextItem, textItem +@docs ItemStyle, Item +@docs FullBleedItemStyle, fullBleedItem +@docs InsetItem, InsetItemStyle, insetItem @docs ExpansionItemStyle, ExpansionItem, expansionItem @docs ImageItemStyle, ImageItem, imageItem @docs MultiLineItemStyle, MultiLineItem, multiLineItem @@ -123,14 +121,14 @@ You can create you own widgets by sticking widgets types together. # App Bar +![App Bar](https://orasund.github.io/elm-ui-widgets/assets/appBar.png) + @docs AppBarStyle, menuBar, tabBar # Sort Table -![SortTable](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png) - -[Open in Ellie](https://ellie-app.com/9p5RXw44B4Ja1) +![Sort Table](https://orasund.github.io/elm-ui-widgets/assets/sortTable.png) @docs SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn @@ -139,8 +137,6 @@ You can create you own widgets by sticking widgets types together. ![textInput](https://orasund.github.io/elm-ui-widgets/assets/textInput.png) -[Open in Ellie](https://ellie-app.com/9p5S6cvWCmBa1) - @docs TextInputStyle, TextInput, textInput @@ -148,8 +144,6 @@ You can create you own widgets by sticking widgets types together. ![tab](https://orasund.github.io/elm-ui-widgets/assets/tab.png) -[Open in Ellie](https://ellie-app.com/9p5Sdbvp4jZa1) - @docs TabStyle, Tab, tab @@ -157,8 +151,6 @@ You can create you own widgets by sticking widgets types together. ![progress Indicator](https://orasund.github.io/elm-ui-widgets/assets/progressIndicator.png) -[Open in Ellie](https://ellie-app.com/c47GJktH2bqa1) - @docs ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator -} @@ -572,6 +564,7 @@ multiSelect = ----------------------------------------------------------} +{-| -} type alias Modal msg = { onDismiss : Maybe msg , content : Element msg @@ -1103,18 +1096,14 @@ headerItem = { onPress = Nothing , icon = always Element.none , text = "Item" - , content = - \{ size, color } -> - Element.none + , content = always Element.none } , Widget.divider (Material.insetDivider Material.defaultPalette ) , Widget.insetItem (Material.insetItem Material.defaultPalette) { onPress = Nothing , icon = always Element.none , text = "Item" - , content = - \{ size, color } -> - Element.none + , content = always Element.none } ] |> Widget.itemList (Material.cardColumn Material.defaultPalette) @@ -1149,9 +1138,7 @@ insetItem = , onPress = Nothing , icon = always Element.none , text = "Item" - , content = - \{ size, color } -> - Element.none + , content = always Element.none } ] |> Widget.itemList (Material.cardColumn Material.defaultPalette) @@ -1228,8 +1215,6 @@ imageItem = import Element import Widget.Material as Material - import Widget.Material.Color as MaterialColor - import Element.Font as Font type Msg = Toggle Bool @@ -1239,13 +1224,13 @@ imageItem = isExpanded = True in - ( [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette) + ( ( Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette) { onPress = Nothing , icon = always Element.none , text = "Item with Icon" } - ] - ++ Widget.expansionItem (Material.expansionItem Material.defaultPalette ) + ) + :: Widget.expansionItem (Material.expansionItem Material.defaultPalette ) { onToggle = Toggle , isExpanded = isExpanded , icon = always Element.none @@ -1286,8 +1271,6 @@ expansionItem = import Element import Widget.Material as Material - import Widget.Material.Color as MaterialColor - import Element.Font as Font type Msg = Select Int diff --git a/src/Widget/Customize.elm b/src/Widget/Customize.elm index 70e3c49..9bb9939 100644 --- a/src/Widget/Customize.elm +++ b/src/Widget/Customize.elm @@ -17,21 +17,6 @@ module Widget.Customize exposing {-| Each and every widget can be customized by modifing the Style Type. - {- Make a button fill the full width -} - Widget.textButton - ( Material.containedButton - |> (\record -> - { record - | element = record.element ++ [Element.width Element.fill] - } - ) - ) - { onPress = Just PressedButton - , text = "Press Button" - } - -This module will contain helpfull functions to make customization easier. - {- Make a button fill the full width -} Widget.textButton ( Material.containedButton diff --git a/src/Widget/Layout.elm b/src/Widget/Layout.elm index b5cc7bc..141fba1 100644 --- a/src/Widget/Layout.elm +++ b/src/Widget/Layout.elm @@ -13,9 +13,13 @@ module Widget.Layout exposing It is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top). +![Layout](https://orasund.github.io/elm-ui-widgets/assets/layout.png) + # Sheets +![Sheet](https://orasund.github.io/elm-ui-widgets/assets/sheet.png) + @docs leftSheet, rightSheet, searchSheet @@ -35,9 +39,9 @@ import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle) import Widget.Customize as Customize -{-| obtain the Device Calss from a given window. +{-| Obtain the device class from a given window. -Checkout Element.classifyDevice for more information. +Checkout [Element.classifyDevice](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#classifyDevice) for more information. -} getDeviceClass : { height : Int, width : Int } -> DeviceClass @@ -47,7 +51,7 @@ getDeviceClass window = |> .class -{-| partitions actions into primary and additional actions. +{-| Partitions actions into primary and additional actions. It is intended to hide the additional actions in a side menu. @@ -175,7 +179,12 @@ searchSheet style { onDismiss, search } = {-| Material design only allows one element at a time to be visible as modal. The order from most important to least important is as follows: -dialog -> top sheet -> bottom sheet -> left sheet -> right sheet + +1. dialog +2. top sheet +3. bottom sheet +4. left sheet +5. right sheet -} orderModals : diff --git a/src/Widget/Material.elm b/src/Widget/Material.elm index 9c5ff8d..200e8f6 100644 --- a/src/Widget/Material.elm +++ b/src/Widget/Material.elm @@ -18,9 +18,7 @@ module Widget.Material exposing , tab, tabButton ) -{-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png) - -This module implements a Material design theme for all widgets. +{-| This module implements a Material design theme for all widgets. The stylings are following [the official Material Design guidelines](https://material.io/components) as close as possible. Please use these widgets in combination with the official guidelines. @@ -30,7 +28,7 @@ Its recommended to use a font size of 16px width and the [Roboto Font](https://f The style are not opaque, so you can change every styling to your needs. -If you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos. +If you have any suggestions or improvements, be sure to leave a [PR or a Issue](https://github.com/Orasund/elm-ui-widgets/issues) over at the github repos. # Palette @@ -48,7 +46,6 @@ Different styles for buttons have different meanings. Use `containedButton` for **the most** important action of the group. @docs containedButton, outlinedButton, textButton - @docs iconButton, toggleButton, buttonRow @@ -120,12 +117,6 @@ You way want to use special items to visually organize the content of your list. @docs tab, tabButton - -# Advanced - -To create your own Material Widgets, here are all internal functions. -Note that you might want to checkout the [file on GitHub](https://github.com/Orasund/elm-ui-widgets/blob/master/src/Widget/Style/Material.elm) if you want to tweak some internal behaviour. - -} import Color exposing (Color) @@ -227,6 +218,9 @@ darkPalette = {-| A contained button representing the most important action of a group. + +![containedButton](https://orasund.github.io/elm-ui-widgets/assets/material/containedButton.png) + -} containedButton : Palette -> ButtonStyle msg containedButton = @@ -234,6 +228,9 @@ containedButton = {-| A outlined button representing an important action within a group. + +![outlinedButton](https://orasund.github.io/elm-ui-widgets/assets/material/outlinedButton.png) + -} outlinedButton : Palette -> ButtonStyle msg outlinedButton = @@ -241,6 +238,9 @@ outlinedButton = {-| A text button representing a simple action within a group. + +![textButton](https://orasund.github.io/elm-ui-widgets/assets/material/textButton.png) + -} textButton : Palette -> ButtonStyle msg textButton = @@ -251,6 +251,8 @@ textButton = Toggle buttons should only be used with the `iconButton` widget, else use chips instead. +![toggleButton](https://orasund.github.io/elm-ui-widgets/assets/material/toggleButton.png) + Technical Remark: - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button) @@ -265,6 +267,8 @@ toggleButton = {-| An single selectable icon. +![iconButton](https://orasund.github.io/elm-ui-widgets/assets/material/iconButton.png) + Technical Remark: - Could not find any specification details @@ -283,6 +287,8 @@ iconButton = {-| A boolean switch +![switch](https://orasund.github.io/elm-ui-widgets/assets/material/switch.png) + Technical Remark: - The specification states that the disabled switch should have a color dependend on its activness. This is not implemented. @@ -309,6 +315,8 @@ In the [official documentation](https://material.io/components/chips#types) chip - **Filter Chips** are used for selecting multiple options. They typically have a done-icon when selected. - **Action chips** are like button. Make sure to include an icon when using action chips. +![chip](https://orasund.github.io/elm-ui-widgets/assets/material/chip.png) + Technical Remark: - Desided against the implementation of an outlined chip. @@ -326,6 +334,11 @@ chip = -------------------------------------------------------------------------------- +{-| An app bar with a menu on the left side + +![menuBar](https://orasund.github.io/elm-ui-widgets/assets/material/menuBar.png) + +-} menuBar : Palette -> @@ -338,6 +351,11 @@ menuBar = AppBar.menuBar +{-| An app bar with tabs instead of a menu + +![tabBar](https://orasund.github.io/elm-ui-widgets/assets/material/tabBar.png) + +-} tabBar : Palette -> @@ -371,6 +389,9 @@ column = {-| A side sheet. Has a maximal width of 360. + +![sideSheet](https://orasund.github.io/elm-ui-widgets/assets/material/sideSheet.png) + -} sideSheet : Palette -> ColumnStyle msg sideSheet = @@ -392,6 +413,9 @@ bottomSheet = {-| A divider covering the full length + +![fullBleedDivider](https://orasund.github.io/elm-ui-widgets/assets/material/fullBleedDivider.png) + -} fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg fullBleedDivider = @@ -399,6 +423,9 @@ fullBleedDivider = {-| A divider covering only parts of the width + +![insetDivider](https://orasund.github.io/elm-ui-widgets/assets/material/insetDivider.png) + -} insetDivider : Palette -> ItemStyle (DividerStyle msg) msg insetDivider = @@ -406,6 +433,9 @@ insetDivider = {-| A divider in the center + +![middleDivider](https://orasund.github.io/elm-ui-widgets/assets/material/middleDivider.png) + -} middleDivider : Palette -> ItemStyle (DividerStyle msg) msg middleDivider = @@ -413,6 +443,9 @@ middleDivider = {-| A header of a section of a list. Comes with a inset divider. + +![insetHeader](https://orasund.github.io/elm-ui-widgets/assets/material/insetHeader.png) + -} insetHeader : Palette -> ItemStyle (HeaderStyle msg) msg insetHeader = @@ -420,6 +453,9 @@ insetHeader = {-| A header of a section of a list. Comes with a full bleed divider. + +![fullBleedHeader](https://orasund.github.io/elm-ui-widgets/assets/material/fullBleedHeader.png) + -} fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg) msg fullBleedHeader = @@ -428,6 +464,8 @@ fullBleedHeader = {-| An expandable item. +![expansionItem](https://orasund.github.io/elm-ui-widgets/assets/material/expansionItem.png) + Technical Remarks: - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/). @@ -442,6 +480,8 @@ expansionItem = Only use in combination with `toggleButton` +![buttonRow](https://orasund.github.io/elm-ui-widgets/assets/material/buttonRow.png) + -} buttonRow : RowStyle msg buttonRow = @@ -450,6 +490,8 @@ buttonRow = {-| A List styled like a card. +![cardColumn](https://orasund.github.io/elm-ui-widgets/assets/material/cardColumn.png) + Technical Remark: This is a simplification of the [Material Design Card @@ -461,6 +503,11 @@ cardColumn = List.cardColumn +{-| A basic item containg some text, a button. Spans the full width. + +![fullBleedItem](https://orasund.github.io/elm-ui-widgets/assets/material/fullBleedItem.png) + +-} fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg fullBleedItem = Item.fullBleedItem @@ -468,10 +515,7 @@ fullBleedItem = {-| A basic item containg some text, a button and some additional information. -Technical Remark: - -There are some conflicting informations about the height of an element in the [Specification](https://material.io/components/lists#specs). -A normal item should be 48 height, but a item with an icon should be 56. This is confusing, because a normal item can also have an additional icon that is the same size. +![insetItem](https://orasund.github.io/elm-ui-widgets/assets/material/insetItem.png) -} insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg @@ -480,6 +524,9 @@ insetItem = {-| A text item allowing for more text. + +![multiLineItem](https://orasund.github.io/elm-ui-widgets/assets/material/multiLineItem.png) + -} multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg multiLineItem = @@ -490,6 +537,8 @@ multiLineItem = If the image is bigger then 40x40, the size of the item will change. +![imageItem](https://orasund.github.io/elm-ui-widgets/assets/material/imageItem.png) + -} imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg imageItem = @@ -497,6 +546,9 @@ imageItem = {-| Displays a selection. This should be combined with Widget.selectItem + +![selectItem](https://orasund.github.io/elm-ui-widgets/assets/material/selectItem.png) + -} selectItem : Palette -> ItemStyle (ButtonStyle msg) msg selectItem = @@ -510,6 +562,9 @@ selectItem = {-| An alert dialog for important decisions. Use a snackbar for less important notification. + +![alertDialog](https://orasund.github.io/elm-ui-widgets/assets/material/alertDialog.png) + -} alertDialog : Palette -> DialogStyle msg alertDialog = @@ -523,6 +578,9 @@ alertDialog = {-| A circular progress indicator + +![progressIndicator](https://orasund.github.io/elm-ui-widgets/assets/material/progressIndicator.png) + -} progressIndicator : Palette -> ProgressIndicatorStyle msg progressIndicator = @@ -536,6 +594,9 @@ progressIndicator = {-| A sortable table + +![sortTable](https://orasund.github.io/elm-ui-widgets/assets/material/sortTable.png) + -} sortTable : Palette -> SortTableStyle msg sortTable = @@ -550,6 +611,8 @@ sortTable = {-| A typical snackbar +![snackbar](https://orasund.github.io/elm-ui-widgets/assets/material/snackbar.png) + Technical Remark: - The text color of the button was not given in the specification. This implementation @@ -569,6 +632,8 @@ snackbar = {-| A text input style that is included only to support input chips. +![textInput](https://orasund.github.io/elm-ui-widgets/assets/material/textInput.png) + Technical Remark: - This is just a temporary implementation. It will soon be replaced with the official implementation. @@ -587,6 +652,8 @@ textInput = {-| A single Tab button. +![tabButton](https://orasund.github.io/elm-ui-widgets/assets/material/tabButton.png) + Technical Remark: - The official specification states that the background color should be the surface color, @@ -600,6 +667,9 @@ tabButton = {-| A Tab bar meant for only the upper most level. Do not use a tab within a tab. + +![tab](https://orasund.github.io/elm-ui-widgets/assets/material/tab.png) + -} tab : Palette -> TabStyle msg tab = diff --git a/src/Widget/Snackbar.elm b/src/Widget/Snackbar.elm index 53c52ba..9e6b7f0 100644 --- a/src/Widget/Snackbar.elm +++ b/src/Widget/Snackbar.elm @@ -7,8 +7,6 @@ module Widget.Snackbar exposing A [snackbar](https://material.io/components/snackbars/) shows notification, one at a time. -[Open in Ellie](https://ellie-app.com/9pz7FqhVW83a1) - # Basics