[{"name":"UI.Alert","comment":" The `UI.Alert` is a component for displaying feedback in a full-width banner.\n\nIt can have different background colors depending on the type of feedback.\n\nAn alert can be created and render as in the following pipeline:\n\n    Element.column []\n        [ Alert.danger \"Failed to login.\"\n            |> Alert.renderElement renderConfig\n        , -- The rest of the screen (...)\n        ]\n\n\n# Building\n\n@docs Alert, primary, success, warning, danger\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Alert","comment":" The `Alert msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"danger","comment":" The danger color scheme applied to the alert background.\n\n    Alert.danger \"Failed to apply changes!\"\n\n","type":"String.String -> UI.Alert.Alert msg"},{"name":"primary","comment":" The primary color scheme applied to the alert background.\n\n    Alert.primary \"Proceed to login...\"\n\n","type":"String.String -> UI.Alert.Alert msg"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Alert.Alert msg -> Element.Element msg"},{"name":"success","comment":" The success color scheme applied to the alert background.\n\n    Alert.success \"Category created with success.\"\n\n","type":"String.String -> UI.Alert.Alert msg"},{"name":"warning","comment":" The warning color scheme applied to the alert background.\n\n    Alert.warning \"Proceed with caution!\"\n\n","type":"String.String -> UI.Alert.Alert msg"}],"binops":[]},{"name":"UI.Badge","comment":" Badges are small elements displayed, usually on the right of texts or top-right corner of the view, serving as counters, tags, or labels.\n\nSix color schemes are available: Primary, Warning, Danger, Success, Light, and Dark.\nBut, brightness can also variate using the palette's brightness values with [`Badge.withBrightness`](UI-Palette#withBrightness).\n\nA badge can be created and rendered as in the following pipeline:\n\n    Element.row []\n        [ -- Some cool content\n        , Badge.dark (String.fromInt (List.length someList))\n            |> Badge.renderElement renderConfig\n            |> Element.el [ Element.alignTop ]\n        ]\n\n\n# Building\n\n@docs Badge, primary, success, warning, danger, light, dark\n\n\n# Custom brightness\n\n@docs withBrightness\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Badge","comment":" The `Badge` type is used for describing the component for later rendering.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"danger","comment":" A variation of the badge with danger-tone.\n\n    Badge.danger \"ERROR\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"dark","comment":" A dark grayish variation of the badge.\n\n    Badge.dark \"EMPTY\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"light","comment":" A light grayish variation of the badge.\n\n    Badge.light \"EMPTY\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"primary","comment":" A primary-color variation of the badge.\n\n    Badge.primary \"NEW\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Badge.Badge -> Element.Element msg"},{"name":"success","comment":" A variation of the badge with success-tone.\n\n    Badge.success \"SENT\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"warning","comment":" A variation of the badge with warning-tone.\n\n    Badge.warning \"0\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"withBrightness","comment":" With `Badge.withBrightness`, you'll be able to apply a different brightness for any badge.\nSee [`Palette.brightness*`](UI-Palette#brightnessMiddle) for acceptable values.\n\n    Badge.success \"SENT\"\n        |> Badge.withBrightness Palette.brightnessLight\n        |> Badge.renderElement renderConfig\n\n","type":"UI.Palette.Brightness -> UI.Badge.Badge -> UI.Badge.Badge"}],"binops":[]},{"name":"UI.Button","comment":" The `UI.Button` is a component that can render as a hyperlink, a togglable button, a stylized button, or a clear padded-icon.\n\nFollowing Elm-UI standards, this component is accessible.\n\nA button can be created and rendered as in the following pipeline:\n\n    Element.column []\n        [ -- Some UI.TextFields (...)\n        , Button.fromLabel \"Submit\"\n            |> Button.cmd FormSend Button.primary\n            |> Button.renderElement renderConfig\n        ]\n\n\n# Building\n\n@docs Button, toggle, success, disabled, cmd, redirect\n\n\n# Content\n\n@docs ButtonBody, fromLabel, fromIcon\n\n\n# Style\n\n@docs ButtonStyle, hyperlink, primary, danger, light, clear\n\n\n# Width\n\n@docs ButtonWidth, withWidth, widthFull, widthRelative\n\n\n# Size\n\n@docs withSize\n\n\n# Conditional states\n\n@docs withDisabledIf, withSuccessIf\n\n\n# Rendering\n\n@docs renderElement\n\n\n# Component handling\n\n@docs map\n\n","unions":[{"name":"Button","comment":" The `Button msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]},{"name":"ButtonBody","comment":" The `ButtonBody` is required when assembling the most-basic `Button msg` type.\nIt indicates the contents inside of the desired button, like its label or icon.\n","args":[],"cases":[]},{"name":"ButtonStyle","comment":" Non-toggle buttons must-be styled. The currently available styles are Hyperlink and Embossed.\n\nA hyperlink-styled: See [`Button.hyperlink`](#hyperlink).\n\nAn embossed-styled button has paddings and hovering-effects.\nIt's available through its sub-themes: Primary, Danger, Light, and Clear.\nThese only change background and text color.\n\n","args":[],"cases":[]},{"name":"ButtonWidth","comment":" Describes a compatible width.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"clear","comment":" This is the clear-theme, mostly used on icons where the background color isn't needed.\n","type":"UI.Button.ButtonStyle"},{"name":"cmd","comment":" This is the most common builder.\nIt uses a simple message that is triggered on a click and renders as an embossed and themed button.\n\n    Button.fromLabel \"Click this Button\"\n        |> Button.cmd SomeSimpleMessage Button.primary\n        |> Button.renderElement renderConfig\n\n","type":"msg -> UI.Button.ButtonStyle -> UI.Button.ButtonBody -> UI.Button.Button msg"},{"name":"danger","comment":" This is the danger-theme, and it's reddish for enforcing the user's attention.\n","type":"UI.Button.ButtonStyle"},{"name":"disabled","comment":" This `Button.disabled` builds an embossed-looking, without-message, grayish-colored button.\nIt's another approach for [`Button.withDisabledIf`](#withDisabledIf), helping when you can't compose a message for the desired action at the occasion.\n\n    case event of\n        Just id ->\n            Button.cmd (TriggerEvent id) Button.primary body\n\n        Nothing ->\n            Button.disabled body\n\n","type":"UI.Button.ButtonBody -> UI.Button.Button msg"},{"name":"fromIcon","comment":" `Button.fromIcon` initiates a button's body with icon-content inside it.\n\n    Button.fromIcon (Icon.map \"Go to maps\")\n\n","type":"UI.Icon.Icon -> UI.Button.ButtonBody"},{"name":"fromLabel","comment":" `Button.fromLabel` initiates a button's body with text-content inside it.\n\n    Button.fromLabel \"Click here\"\n\n","type":"String.String -> UI.Button.ButtonBody"},{"name":"hyperlink","comment":" A hyperlink-styled button looks like classical web links: Blue with an underline.\n","type":"UI.Button.ButtonStyle"},{"name":"light","comment":" This is the light-theme, mostly used for less-important actions.\n","type":"UI.Button.ButtonStyle"},{"name":"map","comment":" Transform the messages produced by the component.\n","type":"(a -> b) -> UI.Button.Button a -> UI.Button.Button b"},{"name":"primary","comment":" The primary action's theme.\nThis button usually commits the main task.\n","type":"UI.Button.ButtonStyle"},{"name":"redirect","comment":" Similar to [`Button.cmd`](#cmd), but instead of a message, it redirects to some path.\n\n    Button.fromLabel \"Click this Link\"\n        |> Button.redirect \"https://elm-lang.org/\" Button.hyperlink\n        |> Button.renderElement renderConfig\n\n","type":"UI.Link.Link -> UI.Button.ButtonStyle -> UI.Button.ButtonBody -> UI.Button.Button msg"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Button.Button msg -> Element.Element msg"},{"name":"success","comment":" This `Button.success` builds an embossed-looking, without-message, greenish-colored button.\nIt's another approach for [`Button.withSuccessIf`](#withSuccessIf), helping when you can't compose a message for the desired action at the occasion.\n\n    case event of\n        Just id ->\n            Button.cmd (TriggerEvent id) Button.primary body\n\n        Nothing ->\n            Button.success body\n\n","type":"UI.Button.ButtonBody -> UI.Button.Button msg"},{"name":"toggle","comment":" Toggle is a kind-of button that always contains a toggle-icon and visually looks like an embossed-primary button.\nThe purpose of this button is to toggle between showing/hiding some spammed-content.\n\n    Button.toggle \"Some Hint for Accessibility\" TheTogglingMessage model.isSomethingVisible\n\n","type":"String.String -> (Basics.Bool -> msg) -> Basics.Bool -> UI.Button.Button msg"},{"name":"widthFull","comment":" The button's width will fill its container.\n","type":"UI.Button.ButtonWidth"},{"name":"widthRelative","comment":" The button will have the exact width to fit its contents.\n\n**NOTE**: Default behaviour.\n\n","type":"UI.Button.ButtonWidth"},{"name":"withDisabledIf","comment":" After asserting some condition, `Button.withDisabledIf` will attempt to set the button to a visually-noticeable disabled state (a grayish button where the action can no longer be triggered).\n\n    Button.fromLabel \"Send Someting\"\n        |> Button.cmd (QuerySend \"Something\") Button.primary\n        |> Button.withDisabledIf (model.queryResult != QueryNotAsked)\n        |> Button.renderElement renderConfig\n\n**NOTE**: In case the button is a toggle or the condition resolves as False, nothing will happen.\n\n","type":"Basics.Bool -> UI.Button.Button msg -> UI.Button.Button msg"},{"name":"withSize","comment":" With `Button.withSize`, you'll be able to scale the button between the [standard sizes][size].\n\n[size]: UI-Size\n\nThe sizes (in height) are: Large - 60px; Medium - 48px; Small - 36px; Extra Small - 24px.\n\n    Button.withSize Size.large someButton\n\n**NOTE**: Button's default size is [`Size.medium`](UI-Size#medium)\n\n","type":"UI.Internal.Size.Size -> UI.Button.Button msg -> UI.Button.Button msg"},{"name":"withSuccessIf","comment":" After asserting some condition, `Button.withSuccessIf` will attempt to set the button to a visually-noticeable success state (a greenish button where the action can no longer be triggered).\n\n    Button.fromLabel \"Send Someting\"\n        |> Button.cmd (QuerySend \"Something\") Button.primary\n        |> Button.withSuccessIf (model.queryResult == QueryOkay)\n        |> Button.renderElement renderConfig\n\n**NOTE**: In case the button is a toggle or the condition resolves as False, nothing will happen.\n\n","type":"Basics.Bool -> UI.Button.Button msg -> UI.Button.Button msg"},{"name":"withWidth","comment":" `Button.withWidth` changes the width of the button.\n\n    Button.withWidth Button.widthFull someButton\n\n","type":"UI.Button.ButtonWidth -> UI.Button.Button msg -> UI.Button.Button msg"}],"binops":[]},{"name":"UI.Checkbox","comment":" Accessible and uniform-styled implementation of a checkbox.\n\n@docs checkbox\n\n","unions":[],"aliases":[],"values":[{"name":"checkbox","comment":" Atomic function that defines the component specifications and render to an Element.\n\n    Checkbox.checkbox renderConfig\n        Msg.SetRemember\n        \"Never ask again\"\n        model.rememberSelected\n\n","type":"UI.RenderConfig.RenderConfig -> (Basics.Bool -> msg) -> String.String -> Basics.Bool -> Element.Element msg"}],"binops":[]},{"name":"UI.Icon","comment":" `UI.Icon` is an implementation of icons using an SVG-spritesheet.\n\nIcons' names are after their proposed action/symbolism instead of describing its shape.\nConsequently, we don't use the same icon for different operations as these would confuse the end-users.\n\nTo use these icons, first, you must insert the spritesheet once (and only once) in the layout.\nThe sprite sheet injection uses a custom `Html` component that later populates using a parcel's import.\nSee [`Icon.svgSpriteImport`](UI-Icon#svgSpriteImport) to know what to do on the Elm's side.\nParcel's instructions are in [README](https://github.com/PaackEng/paack-ui/blob/master/README.md).\n\nAn icon can be created and rendered as in the following pipeline:\n\n    Icon.logout \"Logout from this account\"\n        |> Icon.renderElement renderConfig\n\n\n# Embed\n\n@docs svgSpriteImport\n\n\n# Building\n\n@docs Icon, add, check, close, edit, eventLog, previousContent, logout, notifications, paackSpaces, packages, print, nextContent, sandwichMenu, search, seeMore, toggle, toggleDown, toggleUp, warning, filter\n\n\n# Disassemble\n\n@docs getHint\n\n\n# Color\n\n@docs withColor\n\n\n# Size\n\n@docs withSize, withCustomSize\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Icon","comment":" The `Icon` type is used for describing the component for later rendering.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"add","comment":" A plus sign. E.g., used to indicate the creation of new items in tables/lists.\n\n    Icon.add \"Create new user\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"check","comment":" A check mark, commonly used inside checkboxes and radio buttons.\n\n    Icon.check \"Done\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"close","comment":" A times sign. Usually used for closing dialogs.\n\n    Icon.close \"Close this notification\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"edit","comment":" A pen. For editing fields/properties.\n\n    Icon.edit \"Edit contact informations\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eventLog","comment":" A chat-like baloon.\nIn Paack's apps this symbolizes the log of actions.\n\n    Icon.eventLog \"Events\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"filter","comment":" A funnel symbol represented by 3 lines horizontally aligned.\n\n    Icon.filter \"Filter title column\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"getHint","comment":" For not creating data duplication, `Icon.getHint` can extract the hint from an `Icon`.\n\n    let\n        icon =\n            Icon.seeMore \"Read more about this\"\n    in\n    Element.row []\n        [ Icon.renderElement renderConfig icon\n        , Icon.getHint icon\n            |> Text.body1\n            |> Text.renderElement renderConfig\n        ]\n\n","type":"UI.Icon.Icon -> String.String"},{"name":"logout","comment":" An user/person profile's silhouette.\n\n    Icon.logout \"Leave/change account\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"nextContent","comment":" An arrow pointing to the right used in chevrons and paginators.\n\n    Icon.nextContent \"Next page\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"notifications","comment":" A bell for indicating notifications.\n\n    Icon.notifications \"See notifications\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"paackSpaces","comment":" Internal jargon in Paack.\n\n    Icon.paackSpaces \"Spaces\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"packages","comment":" Packages.\n\n    Icon.packages \"Packages\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"previousContent","comment":" An arrow pointing to the left used in chevrons and paginators.\n\n    Icon.previousContent \"Previous page\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"print","comment":" An A4 ink printer.\nIndicates the availability to print something related to the surrounding content.\n\n    Icon.print \"Print pacakage's barcode\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Icon.Icon -> Element.Element msg"},{"name":"sandwichMenu","comment":" Tree-bar stacked vertically.\nIt's usually used in mobile to toggle left bar menus.\n\n    Icon.sandwichMenu \"Open pages menu\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"search","comment":" A magnifying glass. For use in search-related queries.\n\n    Icon.search \"Search package with barcode\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"seeMore","comment":" Ellipsis (three-dots horizontally aligned).\nFor showing hidden details.\n\n    Icon.seeMore \"Read more about this article\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"svgSpriteImport","comment":" Imports the SVG-spritesheet with all icons into the rendered HTML.\n\nThere is no need for using this function when you're using [`UI.NavigationContainer`][nav], and you should be using it.\nBut, in case you aren't, you need to insert this function on the most top component, which probably is the [`Element.layout`][layout], like this:\n\n[nav]: UI-NavigationContainer\n[layout]: /packages/mdgriffith/elm-ui/latest/Element#layout\n\n    main : Program Flags Model Msg\n    main =\n        { yourProgram\n            | view =\n                { title = yourPageTitle\n                , body =\n                    [ Icon.svgSpriteImport\n                    , Element.layout someAttributes yourPageView\n                    ]\n                }\n        }\n\n**NOTE**: Use [`UI.NavigationContainer`][nav]!\n\n","type":"Html.Html msg"},{"name":"toggle","comment":" A foldable paper, toggle some content between showing/hiding, or full/collapsed.\n\n    Icon.toggle \"Expand technical details\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"toggleDown","comment":" An arrow pointing down.\nMay indicate the expansion of a hidden content below.\n\n    Icon.toggleDown \"Expand details\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"toggleUp","comment":" An arrow pointing up.\nMay indicate the collapsing of the content below.\n\n    Icon.toggleUp \"Collapse details\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"warning","comment":" A warning sign (a triangle with an exclamation mark).\n\n    Icon.warning \"Warning\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"withColor","comment":" Icons colors can variate to match text color or contrast with a background.\nSee [`Palette.color`](UI-Palette#color) and [`Palette.setContrasting`](UI-Palette#setContrasting) for how to compose a valid color value.\n\n    Icon.search \"Search logs\"\n        |> Icon.withColor (Palette.color Palette.tonePrimary Palette.brightnessMiddle)\n        |> Icon.renderElement renderConfig\n\n","type":"UI.Palette.Color -> UI.Icon.Icon -> UI.Icon.Icon"},{"name":"withCustomSize","comment":" With `Icon.withCustomSize`, you'll be able to scale the icon using an integer value.\n\nAll Icons are constraint to fit inside a 1:1 square.\nSo the set value also coincides with this square's side length.\nE.g., setting `Icon.withCustomSize 48` will produce a square with 48px on each side.\n\n    Icon.withCustomSize 48 someIcon\n\n**NOTE**: Default value is 20.\n\n","type":"Basics.Int -> UI.Icon.Icon -> UI.Icon.Icon"},{"name":"withSize","comment":" With `Icon.withSize`, you'll be able to scale the icon between the [standard sizes][size].\n\n[size]: UI-Size\n\n    Icon.withSize Size.large someIcon\n\n**NOTE**: Default value is [`Size.medium`](UI-Size#medium).\n\n","type":"UI.Internal.Size.Size -> UI.Icon.Icon -> UI.Icon.Icon"}],"binops":[]},{"name":"UI.Link","comment":" `UI.Link` is just a unified-type for both `Element.link` and \\`Element.newTabLink\n\nFor a pratical example see [`Link.wrapElement`](UI-Link#wrapElement).\n\n\n# Building\n\n@docs Link, link\n\n\n# Target\n\n@docs LinkTarget, withTarget, targetNew, targetRedirect\n\n\n# Rendering\n\n@docs wrapElement\n\n","unions":[{"name":"Link","comment":" The `Link msg` type is used for describing the component for later rendering.\n","args":[],"cases":[]},{"name":"LinkTarget","comment":" The `LinkTarget` is equivalent to [HTML anchor's target](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/target).\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"link","comment":" Builds a link to some desired URL path.\n\n    Link.link \"https://www.googgle.com\"\n\n","type":"String.String -> UI.Link.Link"},{"name":"targetNew","comment":" `LinkTarget` value for opening the link in a new tab.\n\n    Link.withTarget Link.targetNew someLink\n\n","type":"UI.Link.LinkTarget"},{"name":"targetRedirect","comment":" `LinkTarget` value for opening the link in the same tab.\n\n    Link.withTarget Link.targetRedirect someLink\n\n**NOTE**: This is the default behaviour.\n\n","type":"UI.Link.LinkTarget"},{"name":"withTarget","comment":" Modify the link behaviour to open the URL in the same tab or a new one.\n\n    Link.link \"https://www.googgle.com\"\n        |> Link.withTarget Link.targetNew\n\n","type":"UI.Link.LinkTarget -> UI.Link.Link -> UI.Link.Link"},{"name":"wrapElement","comment":" `Link.wrapElement` is similar to [`Element.el`][el] but including the anchor linking behaviour.\n\n[el]: /packages/mdgriffith/elm-ui/latest/Element#el\n\n    Link.wrapElement renderConfig\n        [ Element.centerX, Element.centerY ]\n        (Link.link \"https://www.github.com\")\n        someOtherElement\n\n","type":"UI.RenderConfig.RenderConfig -> List.List (Element.Attribute msg) -> UI.Link.Link -> Element.Element msg -> Element.Element msg"}],"binops":[]},{"name":"UI.ListView","comment":" `UI.ListView` is a styled searchable row list.\nThe main variation (select-lists) has the capability of having one of its rows selected.\n\nThe developer is responsible for coding the row's view.\nWhile this component then applies the borders and the click event.\nAlso, it can optionally filter when having a search bar, and add an action bar.\n\n    view : RenderConfig -> Model -> Element Msg\n    view renderConfig model =\n        ListView.selectList Msg.SelectElement elementView\n            |> ListView.withItems model.myListElements\n            |> ListView.withSearchField\n                { label = \"Search for elements matching name..\"\n                , searchMsg = Msg.FilterSet\n                , currentFilter =\n                    Maybe.map\n                        (\\str -> ( str, elementHasString ))\n                        model.currentFilter\n                }\n            |> ListView.withActionBar\n                { label = \"Create new element\"\n                , icon = Icon.add\n                , onClick =\n                    Msg.UuidGen (Msg.ForDialog << DialogMsg.OpenElementCreation)\n                }\n            |> ListView.withSelected\n                (\\{ id } ->\n                    Maybe.map (.id >> (==) id) model.selectedElement\n                        |> Maybe.withDefault False\n                )\n            |> ListView.withWidth Element.fill\n            |> ListView.renderElement renderConfig\n\n    elementHasString : String -> Element -> Bool\n    elementHasString str { name } =\n        String.contains str name\n\n\n# Building\n\n@docs ListView, selectList\n\n\n# Toggleable variation\n\n@docs ToggleableConfig, ToggleableCover, toggleableList\n\n\n# Options\n\n@docs withItems, withSelected\n\n\n# Extra elements\n\n@docs SearchConfig, withSearchField, ActionConfig, withActionBar\n\n\n# Width\n\n@docs withWidth\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"ListView","comment":" The `ListView object msg` type is used for describing the component for later rendering.\n","args":["object","msg"],"cases":[]}],"aliases":[{"name":"ActionConfig","comment":" `ActionConfig` assembles the required configuration for having an action bar at the bottom of the list.\n\n    { label = \"Create new element\"\n    , icon = Icon.add\n    , onClick =\n        Msg.UuidGen (Msg.ForDialog << DialogMsg.OpenElementCreation)\n    }\n\n","args":["msg"],"type":"{ label : String.String, icon : String.String -> UI.Icon.Icon, onClick : msg }"},{"name":"SearchConfig","comment":" `SearchConfig` assembles the required configuration for having a search field and filter.\n\n    { label = \"Search for elements matching name..\"\n    , searchMsg = Msg.FilterSet\n    , currentFilter =\n        Maybe.map\n            (\\str -> ( str, elementHasString ))\n            model.currentFilter\n    }\n\n","args":["object","msg"],"type":"{ label : String.String, searchMsg : String.String -> msg, currentFilter : Maybe.Maybe ( String.String, String.String -> object -> Basics.Bool ) }"},{"name":"ToggleableConfig","comment":" Configuration required to render a toggleable-list.\n\n    { detailsShowLabel = \"Show details\" -- For accessibility only\n    , detailsCollapseLabel = \"Hide details\" -- For accessibility only\n    , toCover =\n        \\{ name } ->\n            -- ListView.ToggleableCover\n            { title = name, caption = Nothing }\n    , toDetails =\n        \\{ age } ->\n            [ ( \"Age\", Element.text age ) ]\n    , selectMsg = Msg.ElementSelect\n    }\n\n","args":["object","msg"],"type":"UI.Internal.ToggleableList.Config object msg"},{"name":"ToggleableCover","comment":" What is displayed in a collapsed toggleable-list.\n\n    { title = \"Some item\"\n    , caption = Just \"Created at 2020-06-10\"\n    }\n\n","args":[],"type":"UI.Internal.ToggleableList.Cover"}],"values":[{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.ListView.ListView object msg -> Element.Element msg"},{"name":"selectList","comment":" The main variation of `UI.ListView`.\nClick an element, and it will be selected.\n\n    ListView.selectList Msg.SelectElement\n        (\\{ name } ->\n            Element.el [ Element.padding 8 ]\n                (Element.text name)\n        )\n\n","type":"(object -> msg) -> (UI.RenderConfig.RenderConfig -> Basics.Bool -> object -> Element.Element msg) -> UI.ListView.ListView object msg"},{"name":"toggleableList","comment":" Toggleable-lists are a variation of select-lists where the selected element expands with details while all other's details keep collapsed.\n\nWe recommend using `UI.Table` instead, as it uses toggleable-lists for its responsive mode.\n\n    ListView.toggleableList\n        { detailsShowLabel = \"Show details\" -- For accessibility only\n        , detailsCollapseLabel = \"Hide details\" -- For accessibility only\n        , toCover =\n            \\{ name } ->\n                { title = name, caption = Nothing }\n        , toDetails =\n            \\{ age } ->\n                [ ( \"Age\", Element.text age ) ]\n        , selectMsg = Msg.ElementSelect\n        }\n        |> ListView.withItems model.items\n        |> ListView.withSelected isElementSelected\n        |> ListView.renderElement renderConfig\n\n**NOTE**: Toggleable-list elements' view is not codable.\n\n","type":"UI.ListView.ToggleableConfig object msg -> UI.ListView.ListView object msg"},{"name":"withActionBar","comment":" Replaces the component's action-bar.\nAn action-bar is an additional pre-styled stick row that, when clicked, triggers an action.\n\n    ListView.withActionBar\n        { label = \"Create new element\"\n        , icon = Icon.add\n        , onClick =\n            Msg.UuidGen (Msg.ForDialog << DialogMsg.OpenElementCreation)\n        }\n        someListView\n\n","type":"UI.ListView.ActionConfig msg -> UI.ListView.ListView object msg -> UI.ListView.ListView object msg"},{"name":"withItems","comment":" Replaces the component's list of elements.\n\n    ListView.withItems\n        [ { id = 0, name = \"Catarina\" }\n        , { id = 1, name = \"Gabriel\" }\n        ]\n        someListView\n\n","type":"List.List object -> UI.ListView.ListView object msg -> UI.ListView.ListView object msg"},{"name":"withSearchField","comment":" Replaces the component's search-field and allow filtering the elements.\n\n    ListView.withSearchFied\n        { detailsShowLabel = \"Show details\" -- For accessibility only\n        , detailsCollapseLabel = \"Hide details\" -- For accessibility only\n        , toCover =\n            \\{ name } ->\n                -- ListView.ToggleableCover\n                { title = name, caption = Nothing }\n        , toDetails =\n            \\{ age } ->\n                [ ( \"Age\", Element.text age ) ]\n        , selectMsg = Msg.ElementSelect\n        }\n        someListView\n\n","type":"UI.ListView.SearchConfig object msg -> UI.ListView.ListView object msg -> UI.ListView.ListView object msg"},{"name":"withSelected","comment":" Marks every element as selected or not using a boolean-resulted lambda.\n\n    ListView.withSelected\n        (\\{ id } -> id == model.selectedId)\n        someListView\n\n","type":"(object -> Basics.Bool) -> UI.ListView.ListView object msg -> UI.ListView.ListView object msg"},{"name":"withWidth","comment":" Applies [`Element.width`](/packages/mdgriffith/elm-ui/latest/Element#width) to the component.\n\n    ListView.withWidth\n        (Element.fill |> Element.minimum 220)\n        someListView\n\n","type":"Element.Length -> UI.ListView.ListView object msg -> UI.ListView.ListView object msg"}],"binops":[]},{"name":"UI.LoadingView","comment":" The `UI.LoadingView` is a view with a loading spinner and nothing else.\nIt is pretty useful when a view depends on external content fetching.\n\n\n# Different sizes\n\n@docs medium, small, large\n\n","unions":[],"aliases":[],"values":[{"name":"large","comment":" The version with a large (72x72px) spinner.\n","type":"Element.Element msg"},{"name":"medium","comment":" The version with a medium (36x36px) spinner.\n","type":"Element.Element msg"},{"name":"small","comment":" The version with a small (18x18px) spinner.\n","type":"Element.Element msg"}],"binops":[]},{"name":"UI.NavigationContainer","comment":" The `UI.NavigationContainer` (abbreviated as `Nav`) is a page presenter.\nDepending on the situation, it applies the sidebar menu, dialogs, and mobile's navbar over the current page.\n\nFor this, a page must provide some required data through the [`Nav.Container`](#Container) record.\nThat aggregated with the current rendering configuration provided by [`UI.RenderConfig`](UI-RenderConfig#RenderConfig) and the [`Nav.State`](#State), multiplex between possible viewing layouts.\n\nExample of usage:\n\n    view : RenderConfig -> Model.Model -> { body : List (Html Msg.Msg), title : String }\n    view renderConfig { navState, currentPage } =\n        Nav.navigator Msg.NavMsg\n            navState\n            (getPageContainer >> Nav.containerMap Msg.PageMsg)\n            |> Nav.withMenuPages\n                [ Nav.menuPage (Icon.packages \"Packages\")\n                    (Link.link \"/packages\")\n                    (currentPage == Page.Packages)\n                ]\n            |> Nav.withMenuActions\n                [ Nav.menuAction\n                    (Icon.logout \"Logout\")\n                    Msg.SessionLogout\n                ]\n            |> Nav.withMenuLogo \"My company's logo\" someLogoElement\n            |> Nav.toBrowserDocument renderConfig currentPage\n\n    getPageContainer : Page.Page -> Nav.Container Page.Msg\n    getPageContainer page =\n        case page of\n            Page.Packages ->\n                { title = \"Packages\"\n                , content = Nav.contentSingle Packages.view\n                , dialog = Nothing\n                , hasMenu = False\n                }\n\n\n# Model & Update\n\n@docs Msg, State, stateInit, stateUpdate\n\n\n# Building\n\n@docs Navigator, navigator\n\n\n# Page\n\n@docs Container, containerMap\n\n\n# Content\n\n@docs Content, contentSingle, StackChild, contentStackChild\n\n\n# Menu\n\n@docs withMenuLogo, withMenuActions, MenuAction, menuAction, withMenuPages, MenuPage, menuPage\n\n\n# Dialog\n\n@docs Dialog, dialog\n\n\n# Rendering\n\n@docs toBrowserDocument\n\n","unions":[{"name":"Content","comment":" The `Nav.Content msg` manages different kinds of pages' body.\nBy now, the content is either a typical single page or a stacked child of mobile's views.\n\nThe typical single page renders the way they come.\nThe stacked child has a different header on mobile, where a back button replaces the sandwich button.\n\n","args":["msg"],"cases":[]},{"name":"Dialog","comment":" The `Nav.Dialog msg` is a record holding the description of a dialog.\nSee [`Nav.dialog`](#dialog) to see how to create a dialog.\n","args":["msg"],"cases":[]},{"name":"MenuAction","comment":" This record must be generated with [`Nav.menuAction`](#menuAction)\n","args":["msg"],"cases":[]},{"name":"MenuPage","comment":" This record must be generated with [`Nav.menuPage`](#menuPage)\n","args":[],"cases":[]},{"name":"Msg","comment":" The `Nav.Msg` handles menu related messages.\n","args":[],"cases":[]},{"name":"Navigator","comment":" The `Nav.Navigator` handles menu, dialogs and page viewing.\nIt must be initialized using [`Nav.navigator`](#navigator).\n","args":["page","msg"],"cases":[]},{"name":"State","comment":" Keep this one in your Model, it holds the current navigation state.\n","args":[],"cases":[]}],"aliases":[{"name":"Container","comment":" The `Nav.Container msg` describes the current page in its current state.\n\nThe `title` field is exposed as to the browser and reused on the mobile's navbar.\n\nWhen it is `Just someElement`, the `dialog` field is shown over the page.\n\nThe `hasMenu` field can hide the menu when undesired, e.g., login page.\n\nThe `content` field must be the element holding the page's view.\n\n    { content = Nav.contentSingle <| Element.el [] [ Element.text \"Element body\" ]\n    , title = \"Example page\"\n    , dialog = Nothing -- or Just <| Nav.dialog <| ...\n    , hasMenu = True\n    }\n\n","args":["msg"],"type":"{ content : UI.NavigationContainer.Content msg, title : String.String, dialog : Maybe.Maybe (UI.NavigationContainer.Dialog msg), hasMenu : Basics.Bool }"},{"name":"StackChild","comment":" Stacked children are typical on mobile.\nThe most significant difference is they have a customizable navbar where a back button replaces the sandwich menu, allowing the user to return to a higher scope.\nBesides that, they can add custom buttons to the right side of the title.\n\nThis record holds a stack child's configuration.\nThat includes the back button's message, a title which overwrites the main page's title, and the customized buttons.\n\n    { title = \"Edit: Card \" ++ selectedCard.number\n    , buttons =\n        [ Icon.print \"Print card\"\n            |> Button.fromIcon\n            |> Button.cmd (Msg.PrintCard selectedCard) Button.light\n        ]\n    , goBackMsg = Msg.DiscardCardChanges\n    }\n\n","args":["msg"],"type":"{ title : String.String, buttons : List.List (UI.Button.Button msg), goBackMsg : msg }"}],"values":[{"name":"containerMap","comment":" Transform the messages produced by a container.\n","type":"(a -> b) -> UI.NavigationContainer.Container a -> UI.NavigationContainer.Container b"},{"name":"contentSingle","comment":" `Nav.contentSingle` indicates that the current page is a simple single page.\nIt expects the final page's view in the only parameter.\n\n    Nav.contentSingle <| view renderConfig model\n\n","type":"Element.Element msg -> UI.NavigationContainer.Content msg"},{"name":"contentStackChild","comment":" `Nav.contentStackChild` indicates that the current page is a stack child's page.\nIt expects the child's configuration and the final page's view as its parameters.\n\n    Nav.contentStackChild\n        { title = \"Edit: Card \" ++ selectedCard.number\n        , buttons =\n            [ Icon.print \"Print card\"\n                |> Button.fromIcon\n                |> Button.cmd (Msg.PrintCard selectedCard) Button.light\n            ]\n        , goBackMsg = Msg.DiscardCardChanges\n        }\n    <|\n        cardEditView renderConfig selectedCard\n\n","type":"UI.NavigationContainer.StackChild msg -> Element.Element msg -> UI.NavigationContainer.Content msg"},{"name":"dialog","comment":" `Nav.dialog` constructs a [`Nav.Dialog`](#Dialog) from a title, a close message, and the dialog's view.\nNote that the title renders inside the dialog's decoration, with a close button on the opposite side.\n\nThis dialog and its decoration render over the current page's view, adding a transparent black layer between them.\nClicking on the black layer also activates the closing message.\n\n    Nav.dialog\n        \"Create a new card\"\n        Msg.NewCardDiscard\n        (cardNewView model)\n\n","type":"String.String -> msg -> Element.Element msg -> UI.NavigationContainer.Dialog msg"},{"name":"menuAction","comment":" `Nav.menuPage` describes an action to [`Nav.withMenuActions`](#withMenuActions).\n\n    Nav.menuAction\n        (Icon.logout \"Logout\")\n        Msg.SessionLogout\n\n","type":"UI.Icon.Icon -> msg -> UI.NavigationContainer.MenuAction msg"},{"name":"menuPage","comment":" `Nav.menuPage` describes a page to [`Nav.withMenuPages`](#withMenuPages).\n\n    Nav.menuPage (Icon.edit \"Edit cards\")\n        (Link.link \"/edit-cards\")\n        (currentPage == Pages.CardsEdit)\n\n","type":"UI.Icon.Icon -> UI.Link.Link -> Basics.Bool -> UI.NavigationContainer.MenuPage"},{"name":"navigator","comment":" `Nav.navigator` holds the minimum amount of information required for all the features (menu, dialogs, and page's layout) to work.\n\nThe first parameter is a function that should transform [`Nav.Msg`](#Msg) in a message type controlled by the user.\n\nThe second is the current [`Nav.State`](#State), do not initialize this on view, hold it on the app's model, and then pass it to this function.\n\nThe third (and last) parameter is a lambda used to obtain the current page's container.\n\n    Nav.Navigator Msg.FromNav\n        model.navState\n        (\\page ->\n            case page of\n                Page.CardsEdit ->\n                    Pages.CardsEdit.View.container\n\n                Page.AccountProfile ->\n                    Pages.AcountProfile.View.container\n        )\n\n","type":"(UI.NavigationContainer.Msg -> msg) -> UI.NavigationContainer.State -> (page -> UI.NavigationContainer.Container msg) -> UI.NavigationContainer.Navigator page msg"},{"name":"stateInit","comment":" The correct way of instantiating a [`Nav.State`](#State).\n\n    Nav.stateInit renderConfig\n\n","type":"UI.RenderConfig.RenderConfig -> UI.NavigationContainer.State"},{"name":"stateUpdate","comment":" Given a message, apply an update to the [`Nav.State`](#State).\n","type":"UI.NavigationContainer.Msg -> UI.NavigationContainer.State -> ( UI.NavigationContainer.State, Platform.Cmd.Cmd UI.NavigationContainer.Msg )"},{"name":"toBrowserDocument","comment":" End of the builder's life.\nThe result of this function is a ready-to-use [`Browser.Document`](/packages/elm/browser/latest/Browser#Document).\n\nThere is an additional parameter that is the page identifier, used to obtain the current container.\n\n    Nav.toBrowserDocument renderConfig currentPage navigator\n\n","type":"UI.RenderConfig.RenderConfig -> page -> UI.NavigationContainer.Navigator page msg -> { body : List.List (Html.Html msg), title : String.String }"},{"name":"withMenuActions","comment":" `Nav.withMenuActions` replaces the list of the menu's actions.\nTherefore changing the list of items showed at the bottom of the sidebar.\n\n    Nav.withMenuActions\n        [ Nav.menuAction\n            (Icon.language \"Change to English\")\n            (Msg.SetLanguage Lang.English)\n        , Nav.menuAction\n            (Icon.logout \"Logout\")\n            Msg.SessionLogout\n        ]\n        someNav\n\n","type":"List.List (UI.NavigationContainer.MenuAction msg) -> UI.NavigationContainer.Navigator page msg -> UI.NavigationContainer.Navigator page msg"},{"name":"withMenuLogo","comment":" `Nav.withMenuLogo` replaces the logo shown on the menu.\nBy now, this logo is only visible at the desktop's sidebar.\n\nThe first parameter is a hint that exists for accessibility reasons.\n\n    Nav.withMenuLogo \"Paack - Time Matters\"\n        Vectors.paackLogoWhite\n        someNav\n\n","type":"String.String -> Element.Element msg -> UI.NavigationContainer.Navigator page msg -> UI.NavigationContainer.Navigator page msg"},{"name":"withMenuPages","comment":" `Nav.withMenuPages` replaces the list of the menu's navigable pages.\nTherefore changing the list of items showed at the top of the sidebar.\n\n    Nav.withMenuPages\n        [ Nav.menuPage (Icon.edit \"Manage cards\")\n            (Link.link \"/edit-cards\")\n            (currentPage == Page.CardsEdit)\n        , Nav.menuPage (Icon.add \"New manager\")\n            (Link.link \"/add-manager\")\n            (currentPage == Page.ManagerAdd)\n        ]\n        someNav\n\n","type":"List.List UI.NavigationContainer.MenuPage -> UI.NavigationContainer.Navigator page msg -> UI.NavigationContainer.Navigator page msg"}],"binops":[]},{"name":"UI.Paginator","comment":" `UI.Paginator` is a component for helping navigation in a large sample of elements.\nIt provides navigation buttons and current location information.\n\nA paginator does not include the logic required for taking/dropping the source of elements, and neither does the rendering of these elements.\nThe following code applies the paginator to some simple list, and also applies paginating logic on it:\n\n    Element.column\n        [ Element.width fill\n        , Element.height (px 600)\n        ]\n        [ model.options\n            |> List.drop model.pageOffset\n            |> List.take 20\n            |> List.map itemView\n            |> Element.column\n                [ Element.width fill\n                , Element.height fill\n                ]\n        , Paginator.nonNumeric\n            { onNextButtonClicked = Msg.NextPage\n            , onPreviousButtonClicked = Msg.PreviousPage\n            , totalCount = List.length model.options\n            , offset = model.pageOffset\n            , first = 0\n            }\n            renderConfig\n        ]\n\n\n# Building\n\n@docs PaginatorConfig\n\n\n# Rendering\n\n@docs nonNumeric\n\n","unions":[],"aliases":[{"name":"PaginatorConfig","comment":" `PaginatorConfig` holds the configuration required to present a Paginator.\n\n    { onNextButtonClicked = Msg.NextPage\n    , onPreviousButtonClicked = Msg.PreviousPage\n    , totalCount = List.length model.options\n    , offset = model.pageOffset\n    , first = 0\n    }\n\n","args":["msg"],"type":"{ onNextButtonClicked : msg, onPreviousButtonClicked : msg, totalCount : Basics.Int, offset : Basics.Int, first : Basics.Int }"}],"values":[{"name":"nonNumeric","comment":" Given a [`PaginatorConfig`](UI-Paginator#PaginatorConfig), renders paginator.\nThis paginator style (non-numeric) has only the next and previous buttons. In between those, it presents the current offset.\n\n    Paginator.nonNumeric\n        paginatorConfig\n        renderConfig\n\n","type":"UI.Paginator.PaginatorConfig msg -> UI.RenderConfig.RenderConfig -> Element.Element msg"}],"binops":[]},{"name":"UI.Palette","comment":" `UI.Palette` is an interface offering all colors variations proposed in the design system.\n\n    Palette.color tonePrimary brightnessMiddle\n        |> Palette.toElementColor\n\n\n# What color\n\n@docs Tone, toneGray, tonePrimary, toneSuccess, toneWarning, toneDanger\n\n\n# How much bright\n\n@docs Brightness, brightnessDarkest, brightnessMiddle, brightnessLight, brightnessLighter, brightnessLightest\n\n\n# Building\n\n@docs Color, color\n\n\n# Inverting\n\n@docs setContrasting\n\n\n# Making it transparent\n\n@docs withAlpha\n\n\n# Obtaining a usable variation\n\n@docs toElementColor, toCssColor\n\n","unions":[{"name":"Brightness","comment":" Each [tone](UI-Palette#Tone) is later split in five brightness variations.\n\nThe five variations are Darkest, Middle, Light, Lighter, Lightest.\n\n","args":[],"cases":[]},{"name":"Color","comment":" `Palette.Color` upholds data about some desired color.\n","args":[],"cases":[]},{"name":"Tone","comment":" The design system describes four main entries that here are called Tones.\n\nA tone is a color with five brightness variations and a specific purpose.\n\nThe four tones are Gray, Primary, Success, Warning, and Danger.\n\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"brightnessDarkest","comment":" The darkest variation of some tone.\n","type":"UI.Palette.Brightness"},{"name":"brightnessLight","comment":" The first light variation of some tone.\n","type":"UI.Palette.Brightness"},{"name":"brightnessLighter","comment":" The increased-light variation of some tone.\n","type":"UI.Palette.Brightness"},{"name":"brightnessLightest","comment":" The lightest variation of some tone.\n","type":"UI.Palette.Brightness"},{"name":"brightnessMiddle","comment":" The base of all variations of some tone.\n","type":"UI.Palette.Brightness"},{"name":"color","comment":" Given a tone and brightness, initiates the building of a color.\n\n    Palette.color tonePrimary brightnessMiddle\n\n","type":"UI.Palette.Tone -> UI.Palette.Brightness -> UI.Palette.Color"},{"name":"setContrasting","comment":" Given some color, inverts it to contrast. Useful for contrasting text with the background.\n\n    backgroundColor\n        |> Palette.setContrasting True\n        |> Palette.toElementColor\n        |> Element.Font.color\n\n","type":"Basics.Bool -> UI.Palette.Color -> UI.Palette.Color"},{"name":"toCssColor","comment":" Transforms a [`Palette.Color`](UI-Palette#Color) into a CSS-compatible parameter.\n\n    Palette.color tonePrimary brightnessMiddle\n        |> Palette.toCssColor\n        |> Html.Attributes.style \"font-color\"\n\n","type":"UI.Palette.Color -> String.String"},{"name":"toElementColor","comment":" Transforms a [`Palette.Color`](UI-Palette#Color) into an Elm-UI-compatible color.\n\n    let\n        backgroundColor =\n            Palette.color tonePrimary brightnessMiddle\n    in\n    Element.el\n        [ backgroundColor\n            |> Palette.setContrasting True\n            |> Palette.toElementColor\n            |> Element.Font.color\n        , backgroundColor\n            |> Palette.toElementColor\n            |> Element.Background.color\n        ]\n    <|\n        Element.text \"Hello World!\"\n\n","type":"UI.Palette.Color -> Element.Color"},{"name":"toneDanger","comment":" A redish tone.\n","type":"UI.Palette.Tone"},{"name":"toneGray","comment":" A grayish tone.\n","type":"UI.Palette.Tone"},{"name":"tonePrimary","comment":" A blueish tone.\n","type":"UI.Palette.Tone"},{"name":"toneSuccess","comment":" A greenish tone.\n","type":"UI.Palette.Tone"},{"name":"toneWarning","comment":" A yellowish tone.\n","type":"UI.Palette.Tone"},{"name":"withAlpha","comment":" Applies an alpha value to the color, making it transparent.\n\n    backgroundColor\n        |> Palette.withAlpha 0.5\n        |> Palette.toElementColor\n        |> Element.Background.color\n\n","type":"Basics.Float -> UI.Palette.Color -> UI.Palette.Color"}],"binops":[]},{"name":"UI.Radio","comment":" Accessible and uniform-styled implementation of a radio buttons.\n\n@docs group\n\n","unions":[],"aliases":[],"values":[{"name":"group","comment":" An atomic function that defines the options, which one is selected, the selecting message, and renders it all to an Element.\n\n    Radio.group renderConfig\n        \"Pick a favorite animal:\"\n        (Just Felines)\n        [ ( Felines, \"Felines\" )\n        , ( Canines, \"Canines\" )\n        , ( Birds, \"Birds\" )\n        ]\n\n","type":"UI.RenderConfig.RenderConfig -> String.String -> (a -> msg) -> Maybe.Maybe a -> List.List ( a, String.String ) -> Element.Element msg"}],"binops":[]},{"name":"UI.RenderConfig","comment":" `UI.RenderConfig` propagates data for accessibility and responsivity in all components.\n\nThe recommended approach is storing it in the app's Model, gathering the required init parameters using Elm's flags. For keeping it update, subscribe to [`Browser.onResize`](/packages/elm/browser/latest/Browser-Events#onResize) and apply update using [`RenderConfig.updateWindow`](UI-RenderConfig#updateWindow).\n\n    RenderConfig.fromWindow\n        { width = flags.innerWidth\n        , height = flags.innerHeight\n        }\n\n\n# Building\n\n@docs RenderConfig, fromWindow\n\n\n# Update\n\n@docs updateWindow\n\n\n# Responsivity\n\n@docs isMobile, isPortrait\n\n\n# Layout\n\n@docs elLayoutAttributes\n\n","unions":[{"name":"RenderConfig","comment":" `RenderConfig.RenderConfig` upholds all the information required for the components to apply the responsivity and accessibility changes.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"elLayoutAttributes","comment":" `RenderConfig.elLayoutAttributes` are the recommended attributes for [`Element.layout`](/packages/mdgriffith/elm-ui/latest/Element#layout).\n\nIf the app is using [`UI.NavigationContainer.navigator`](UI-NavigationContainer#navigator) then there is nothing to worry about as it already uses these attributes.\n\n    Element.layout (RenderConfig.elLayoutAttributes renderConfig) (appView model)\n\n","type":"UI.RenderConfig.RenderConfig -> List.List (Element.Attribute msg)"},{"name":"fromWindow","comment":" `RenderConfig.fromWindow` builds a [`RenderConfig.RenderConfig`](UI-RenderConfig#RenderConfig) with the minimum necessary information for responsivity to work.\n\n    RenderConfig.fromWindow\n        { width = 1920\n        , height = 1080\n        }\n\n","type":"{ window | height : Basics.Int, width : Basics.Int } -> UI.RenderConfig.RenderConfig"},{"name":"isMobile","comment":" `True` when the browser is a mobile browser.\n\n    if RenderConfig.isMobile renderConfig then\n        -- Mobile view\n    else\n        -- Desktop view\n\n","type":"UI.RenderConfig.RenderConfig -> Basics.Bool"},{"name":"isPortrait","comment":" `True` when the browser is in portrait orientation and not landscape.\n\n    if RenderConfig.isPortrait renderConfig then\n        -- Portrait view\n    else\n        -- Landscape view\n\n","type":"UI.RenderConfig.RenderConfig -> Basics.Bool"},{"name":"updateWindow","comment":" The subscribed event of resizing the browser should reflect on a `RenderConfig` update.\nFor that, use `RenderConfig.updateWindow`\n\n    RenderConfig.updateWindow\n        { width = 1920\n        , height = 1080\n        }\n        oldRenderConfig\n\n","type":"{ window | height : Basics.Int, width : Basics.Int } -> UI.RenderConfig.RenderConfig -> UI.RenderConfig.RenderConfig"}],"binops":[]},{"name":"UI.Size","comment":" Contextual size for buttons and icons, as described in the design system.\n\n\n# Sizes\n\n@docs Size, extraSmall, small, medium, large\n\n","unions":[],"aliases":[{"name":"Size","comment":" Upholds a size value.\n","args":[],"type":"UI.Internal.Size.Size"}],"values":[{"name":"extraSmall","comment":" For extra-small-sized components.\n","type":"UI.Size.Size"},{"name":"large","comment":" For large-sized components.\n","type":"UI.Size.Size"},{"name":"medium","comment":" For medium-sized components.\n\n**NOTE**: This is the default value.\n\n","type":"UI.Size.Size"},{"name":"small","comment":" For small-sized components.\n","type":"UI.Size.Size"}],"binops":[]},{"name":"UI.Tables.Common","comment":"\n\n\n## Desktop\n\n@docs Columns, columnsEmpty, column\n\n\n## Individual column\n\n@docs ColumnWidth, columnWidthPortion, columnWidthPixels\n\n\n## Desktop rows\n\n@docs Row, ToRow, rowEmpty, rowCellText, rowCellButton\n\n\n# Individual cell\n\n@docs Cell, cellFromText, cellFromButton\n\n","unions":[],"aliases":[{"name":"Cell","comment":" A singular cell of a table.\nCan hold texts and buttons by now.\n","args":["msg"],"type":"UI.Internal.Table.Cell msg"},{"name":"ColumnWidth","comment":" `ColumnWidth` specifies a cell's width.\n","args":[],"type":"UI.Internal.Table.ColumnWidth"},{"name":"Columns","comment":" Array with all the columns from a table.\n\nThis is a type-safe sized-array.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["columns"],"type":"UI.Internal.NArray.NArray UI.Internal.Table.Column columns"},{"name":"Row","comment":" Array with all the cells in a single row.\n\nThis is a type-safe sized-array.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose the phantom type.\n\n","args":["msg","columns"],"type":"UI.Internal.NArray.NArray (UI.Tables.Common.Cell msg) columns"},{"name":"ToRow","comment":" Helper for composing a map function for a single row.\n","args":["msg","item","columns"],"type":"item -> UI.Tables.Common.Row msg columns"}],"values":[{"name":"cellFromButton","comment":" Creates a cell with a button inside.\n\n    Button.fromText \"Delete\"\n        |> Button.cmd Msg.Delete Button.danger\n        |> cellFromButton\n\n","type":"UI.Button.Button msg -> UI.Tables.Common.Cell msg"},{"name":"cellFromText","comment":" Creates a cell with some text content.\n\n    cellFromText <| Text.body2 \"Watermelon\"\n\n","type":"UI.Text.Text -> UI.Tables.Common.Cell msg"},{"name":"column","comment":" Appends a new column to the list of columns, defining its header's label and the entire column's width.\n\n    columnsEmpty\n        |> column \"Name\" (columnWidthPortion 3)\n        |> column \"Age\" (columnWidthPortion 1)\n\n","type":"String.String -> UI.Tables.Common.ColumnWidth -> UI.Tables.Common.Columns columns -> UI.Tables.Common.Columns (UI.Utils.TypeNumbers.Increase columns)"},{"name":"columnWidthPixels","comment":" Similar to [`Element.px`](/packages/mdgriffith/elm-ui/latest/Element#px) but applied to an entire Table's column.\n\n    columnEmpty\n        |> column \"Name\" (columnWidthPixels 320)\n        |> column \"Length\" (columnWidthPixels 240)\n        |> column \"Population\" (columnWidthPixels 240)\n\n","type":"Basics.Int -> UI.Tables.Common.ColumnWidth"},{"name":"columnWidthPortion","comment":" Similar to [`Element.fillPortion`](/packages/mdgriffith/elm-ui/latest/Element#fillPortion) but applied to an entire Table's column.\n\n    columnsEmpty\n        |> column \"Title\" (columnWidthPortion 3)\n        |> column \"Author\" (columnWidthPortion 3)\n        |> column \"Year\" (columnWidthPortion 2)\n\n","type":"Basics.Int -> UI.Tables.Common.ColumnWidth"},{"name":"columnsEmpty","comment":" An empty [`Columns`](#Columns) set.\n\n    columnsEmpty\n        |> column \"Star\" (columnWidthPortion 3)\n        |> column \"Constellation\" (columnWidthPortion 3)\n        |> column \"Distance\" (columnWidthPortion 2)\n\n","type":"UI.Tables.Common.Columns UI.Utils.TypeNumbers.Zero"},{"name":"rowCellButton","comment":" Transforms a `UI.Button` into a cell appending it to a row.\n\nSimilar to [`cellFromButton`](#cellFromButton) but infused for rows.\n\n    rowEmpty\n        |> rowCellText (Text.body1 \"Aldebaran\")\n        |> rowCellButton\n            (\"See in Stellarium\"\n                |> Button.fromText\n                |> Button.redirect \"stellarium://gj/9159\"\n                    Button.hyperlink\n            )\n\n","type":"UI.Button.Button msg -> UI.Tables.Common.Row msg columns -> UI.Tables.Common.Row msg (UI.Utils.TypeNumbers.Increase columns)"},{"name":"rowCellText","comment":" Transforms a `UI.Text` into a cell appending it to a row.\n\nSimilar to [`cellFromText`](#cellFromText) but infused for rows.\n\n    rowEmpty\n        |> rowCellText (Text.body1 \"Coffee\")\n        |> rowCellText (Text.body2 \"Brazil\")\n\n","type":"UI.Text.Text -> UI.Tables.Common.Row msg columns -> UI.Tables.Common.Row msg (UI.Utils.TypeNumbers.Increase columns)"},{"name":"rowEmpty","comment":" An empty set of cells for a row.\n\n    rowEmpty\n        |> rowCellText (Text.body1 \"Hello\")\n        |> rowCellText (Text.body2 \"World\")\n\n","type":"UI.Tables.Common.Row msg UI.Utils.TypeNumbers.Zero"}],"binops":[]},{"name":"UI.Tables.Stateful","comment":" Tables are a matrixial data disposition with rows, columns, headers, and cells.\n\n`UI.Tables` are type-safe, which means that every row needs to have the same number of columns (including the headers). Otherwise, compilation fails.\n\n    Stateful.table\n        { toExternalMsg = Msg.ForTable\n        , columns = Book.tableColumns\n        , toRow = Book.toTableRow\n        , state = model.tableState\n        }\n        |> Stateful.withResponsive\n            { toDetails = Book.toTableDetails\n            , toCover = Book.toTableCover\n            }\n        |> Stateful.withWidth (Element.fill |> Element.maximum 640)\n        |> Stateful.withItems\n            [ Book \"Dan Brown\" \"Angels & Demons\" \"2000\"\n            , Book \"Dan Brown\" \"The Da Vinci Code\" \"2003\"\n            , Book \"Dan Brown\" \"The Lost Symbol\" \"2009\"\n            , Book \"Dan Brown\" \"Inferno\" \"2013\"\n            , Book \"Dan Brown\" \"Origin\" \"2017\"\n            ]\n        |> Stateful.renderElement renderConfig\n\nWhere `Book` is:\n\n    type alias Book =\n        { author : String, title : String, year : String }\n\n    tableColumns =\n        columnsEmpty\n            |> column \"Title\" (columnWidthPixels 320)\n            |> column \"Author\" (columnWidthPixels 240)\n            |> column \"Year\" (columnWidthPixels 120)\n\n    toTableRow { author, title, year } =\n        rowEmpty\n            |> rowCellText (Text.body1 title)\n            |> rowCellText (Text.body2 author)\n            |> rowCellText (Text.caption year)\n\n    toTableDetails { author, title } =\n        detailsEmpty\n            |> detailHidden\n            |> detailShown { label = \"Author\", content = cellFromText <| Text.body2 author }\n            |> detailHidden\n\n    toTableCover { title, year } =\n        { title = title, caption = Just year }\n\n    someFilters =\n        filtersEmpty\n            |> localSingleTextFilter Nothing .title\n            |> localSingleTextFilter (Just \"Dan\") .author\n            |> localSingleTextFilter Nothing .year\n\nAnd on model:\n\n    { -...\n    , tableState : Stateful.Table Msg.Msg TypeNumbers.Three\n    }\n\n    { -...\n    , tableState = Stateful.withFilters Book.someFilters Stateful.init\n    }\n\n\n# Stateful\n\n@docs StatefulTable, StatefulConfig, table, withItems\n\n\n## Mobile\n\n@docs Responsive, Cover, Details, Detail, withResponsive, detailsEmpty, detailShown, detailHidden\n\n\n## State\n\n@docs State, Msg, init, update\n\n\n# Filters\n\n@docs Filters, filtersEmpty, stateWithFilters\n\n\n## Single Text\n\n@docs localSingleTextFilter, remoteSingleTextFilter\n\n\n## Multi Text\n\n@docs localMultiTextFilter, remoteMultiTextFilter\n\n\n## Single DateInput\n\n@docs localSingleDateFilter, remoteSingleDateFilter\n\n\n## Range Dates\n\n@docs localRangeDateFilter, remoteRangeDateFilter\n\n\n## Period Dates\n\n@docs periodSingle, pariodAfter, periodBefore, localPeriodDateFilter, remotePeriodDateFilter\n\n\n## Select (Radio Buttons)\n\n@docs localSelectFilter, remoteSelectFilter\n\n\n# Width\n\n@docs withWidth\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Msg","comment":" The `Stateful.Msg` handles stateful table's related messages.\n","args":[],"cases":[]},{"name":"State","comment":" Keep this one in your Model, it holds the table's current state.\n","args":["msg","item","columns"],"cases":[]},{"name":"StatefulTable","comment":" The `StatefulTable msg item columns` type is used for describing the component for later rendering.\n\nThis is type that constrains type-safe sized-arrays.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["msg","item","columns"],"cases":[]}],"aliases":[{"name":"Cover","comment":" What is displayed in a collapsed mobile's row.\n\n    { title = \"Foo Fighters - Everlong\"\n    , caption = Just \"Morumbi - São Paulo 2015-01-23\"\n    }\n\n","args":[],"type":"UI.ListView.ToggleableCover"},{"name":"Detail","comment":" Used to render a cell in the mobile's layout.\n","args":["msg"],"type":"{ label : String.String, content : UI.Tables.Common.Cell msg }"},{"name":"Details","comment":" A set of [`Detail msg`](#Detail).\nMust have the same amount of elements as cells do in the table's row.\n","args":["msg","columns"],"type":"UI.Internal.NArray.NArray (Maybe.Maybe (UI.Tables.Stateful.Detail msg)) columns"},{"name":"Filters","comment":" Array with all the columns' filters and their initial state.\n\nThis is a type-safe sized-array.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["msg","item","columns"],"type":"UI.Internal.Filters.Filters msg item columns"},{"name":"Responsive","comment":" Required information for displaying the mobile's layout.\n\nThis is record that constrains type-safe sized-arrays.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n    { toDetails = Book.toTableDetails\n    , toCover = Book.toTableCover\n    }\n\n","args":["msg","item","columns"],"type":"{ toDetails : item -> UI.Tables.Stateful.Details msg columns, toCover : item -> UI.Tables.Stateful.Cover }"},{"name":"StatefulConfig","comment":" Record with parameters for the creation of a [`StatefulTable`](#table).\n\nThis is record that constrains type-safe sized-arrays.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n    { toExternalMsg = Msg.ForTable\n    , columns = Book.tableColumns\n    , toRow = Book.toTableRow\n    , state = model.tableState\n    }\n\n","args":["msg","item","columns"],"type":"{ columns : UI.Tables.Common.Columns columns, toRow : UI.Tables.Common.ToRow msg item columns, toExternalMsg : UI.Tables.Stateful.Msg -> msg, state : UI.Tables.Stateful.State msg item columns }"}],"values":[{"name":"detailHidden","comment":" Defines that a cell will be hidden in the mobile's layout.\n\n    detailsEmpty\n        |> detailHidden\n        |> detailHidden\n        |> detailHidden\n\n","type":"UI.Tables.Stateful.Details msg columns -> UI.Tables.Stateful.Details msg (UI.Utils.TypeNumbers.Increase columns)"},{"name":"detailShown","comment":" Defines that a cell will be shown in the mobile's layout.\n\n    detailShown\n        { label = \"Edit\"\n        , content = cellFromButton editButton\n        }\n        detailsSet\n\n","type":"UI.Tables.Stateful.Detail msg -> UI.Tables.Stateful.Details msg columns -> UI.Tables.Stateful.Details msg (UI.Utils.TypeNumbers.Increase columns)"},{"name":"detailsEmpty","comment":" An empty [`Details`](#Details) set.\n\n    toTableDetails { author, title } =\n        detailsEmpty\n            |> detailHidden\n            |> detailShown\n                { label = \"Author\"\n                , content = cellFromText (Text.body2 author)\n                }\n            |> detailHidden\n\n","type":"UI.Tables.Stateful.Details msg UI.Utils.TypeNumbers.Zero"},{"name":"filtersEmpty","comment":" An empty [`Filters`](#Filters) set.\n\n    toTableDetails { author, title } =\n        filtersEmpty\n            |> localSingleTextFilter Nothing .title\n            |> localSingleTextFilter (Just \"Dan\") .author\n            |> localSingleTextFilter Nothing .year\n\n","type":"UI.Tables.Stateful.Filters msg item UI.Utils.TypeNumbers.Zero"},{"name":"init","comment":" The correct way of instantiating a [`Table.State`](#State).\n\n    { -- ...\n    , tableState = Stateful.init\n    -- ...\n    }\n\n","type":"UI.Tables.Stateful.State msg item columns"},{"name":"localMultiTextFilter","comment":" A filter with multiple text field.\nThe content must match at least one of those fields otherwise it's filtered out.\nOnly part of the content must match the filter's input.\nFiltering logic is applied internally by the component.\n\n    localMultiTextFilter\n        []\n        mapItemToString\n\nFor having an initial filter applied:\n\n    localMultiTextFilter\n        [ \"initial\", \"fields\" ]\n        mapItemToString\n\n","type":"List.List String.String -> (item -> String.String) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"localPeriodDateFilter","comment":" A filter for a single date, dates before specified date, or dates after specified date.\nThe filter-case is defined using radio buttons.\nFiltering logic is applied internally by the component.\n\n    localPeriodDateFilter timeZone\n        (Just somePosixEpoch)\n        (Just periodAfter)\n        mapItemToPosixEpoch\n\n**NOTE**: Hours, minutes and seconds are discarded from the range limits.\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe UI.Tables.Stateful.PeriodComparison -> (item -> Time.Posix) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"localRangeDateFilter","comment":" A filter for dates in an expected range.\nThe range is defined using two date fields.\nFiltering logic is applied internally by the component.\n\n    localRangeDateFilter timeZone\n        (Just datesAfterThis)\n        (Just datesBeforeThis)\n        mapItemToPosixEpoch\n\n**NOTE**: Hours, minutes and seconds are discarded from the range limits.\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe Time.Posix -> (item -> Time.Posix) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"localSelectFilter","comment":" A filter for custom radio buttons.\nFiltering logic is applied internally by the component.\n\n    localSelectFilter\n        [ \"Option 1\"\n        , \"Option 2\"\n        ]\n        (Just 1)\n        mapItemEachOptionToBool\n\n","type":"List.List String.String -> Maybe.Maybe Basics.Int -> (item -> Basics.Int -> Basics.Bool) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"localSingleDateFilter","comment":" A filter for dates with one single field.\nFiltering logic is applied internally by the component.\n\n    localSingleDateFilter timeZone\n        (Just somePosixEpoch)\n        mapItemToPosixEpoch\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> (item -> Time.Posix) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"localSingleTextFilter","comment":" A filter with one single text field.\nOnly part of the content must match the filter's input.\nFiltering logic is applied internally by the component.\n\n    localSingleTextFilter\n        maybeInitialValue\n        mapItemToString\n\n","type":"Maybe.Maybe String.String -> (item -> String.String) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"pariodAfter","comment":" When comparing if some date is after another.\n","type":"UI.Tables.Stateful.PeriodComparison"},{"name":"periodBefore","comment":" When comparing if some date is before another.\n","type":"UI.Tables.Stateful.PeriodComparison"},{"name":"periodSingle","comment":" When comparing if dates are the same.\n","type":"UI.Tables.Stateful.PeriodComparison"},{"name":"remoteMultiTextFilter","comment":" A filter with multiple text field.\nThe content must match at least one of those fields otherwise it's filtered out.\nOnly part of the content must match the filter's input.\n\nFiltering logic is applied through an external message.\nWhen an empty list is applied to the message, it means to clear the current filter.\n\n    remoteMultiTextFilter\n        [ \"initial\", \"fields\" ]\n        Msg.ApplyFilter\n\n","type":"List.List String.String -> (List.List String.String -> msg) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"remotePeriodDateFilter","comment":" A filter for a single date, dates before specified date, or dates after specified date.\nThe filter-case is defined using radio buttons.\n\nFiltering logic is applied through an external message.\nWhen `Nothing` is applied to the message, it means to clear the current filter.\n\n    remotePeriodDateFilter timeZone\n        (Just somePosixEpoch)\n        (Just periodAfter)\n        Msg.ApplyFilter\n\n**NOTE**: Hours, minutes and seconds are discarded from the range limits.\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe UI.Tables.Stateful.PeriodComparison -> (Maybe.Maybe UI.Internal.DateInput.PeriodDate -> msg) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"remoteRangeDateFilter","comment":" A filter for dates in an expected range.\nThe range is defined using two date fields.\n\nFiltering logic is applied through an external message.\nWhen `Nothing` is applied to the message, it means to clear the current filter.\n\n    remoteRangeDateFilter timeZone\n        (Just datesAfterThis)\n        (Just datesBeforeThis)\n        Msg.ApplyFilter\n\n**NOTE**: Hours, minutes and seconds are discarded from the range limits.\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe Time.Posix -> (Maybe.Maybe UI.Internal.DateInput.RangeDate -> msg) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"remoteSelectFilter","comment":" A filter for custom radio buttons.\n\nFiltering logic is applied through an external message.\nWhen `Nothing` is applied to the message, it means to clear the current filter.\n\n    remoteSelectFilter\n        [ \"Option 1\"\n        , \"Option 2\"\n        ]\n        (Just 1)\n        Msg.ApplyFilter\n\n","type":"List.List String.String -> Maybe.Maybe Basics.Int -> (Maybe.Maybe Basics.Int -> msg) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"remoteSingleDateFilter","comment":" A filter for dates with one single field.\nFiltering logic is applied through an external message.\nWhen `Nothing` is applied to the message, it means to clear the current filter.\n\n    remoteSingleDateFilter\n        maybeInitialPosix\n        Msg.ApplyFilter\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> (Maybe.Maybe UI.Internal.DateInput.DateInput -> msg) -> UI.Internal.Filters.Filters msg item columns -> UI.Internal.Filters.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"remoteSingleTextFilter","comment":" A filter with one single text field.\nOnly part of the content must match the filter's input.\nFiltering logic is applied through an external message.\nWhen `Nothing` is applied to the message, it means to clear the current filter.\n\n    remoteSingleTextFilter\n        maybeInitialValue\n        Msg.ApplyFilter\n\n","type":"Maybe.Maybe String.String -> (Maybe.Maybe String.String -> msg) -> UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.Filters msg item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Tables.Stateful.StatefulTable msg item columns -> Element.Element msg"},{"name":"stateWithFilters","comment":" Apply filters defintion to a table's [`State`](#State).\n\n    model =\n        stateWithFilters Book.filtersInit init\n\n","type":"UI.Tables.Stateful.Filters msg item columns -> UI.Tables.Stateful.State msg item columns -> UI.Tables.Stateful.State msg item columns"},{"name":"table","comment":" Constructs a stateful table from its columns and rows.\nAlso defines the handling function for messages, and the current table's state.\n\n    table\n        { columns = Book.tableColumns\n        , toRow = Book.toTableRow\n        , toExternalMsg = Msg.ForTable\n        , state = model.tableState\n        }\n\n","type":"UI.Tables.Stateful.StatefulConfig msg item columns -> UI.Tables.Stateful.StatefulTable msg item columns"},{"name":"update","comment":" Given a message, apply an update to the [`Table.State`](#State).\nDo not ignore the returned `Cmd`, it may include remote filter's messages.\n\n    ( newModel, newCmd ) =\n        Table.update subMsg oldModel.tableState\n\n","type":"UI.Tables.Stateful.Msg -> UI.Tables.Stateful.State msg item columns -> ( UI.Tables.Stateful.State msg item columns, Platform.Cmd.Cmd msg )"},{"name":"withItems","comment":" Each of these items will become a row in this table.\n\n    withItems\n        [ Book \"Dan Brown\" \"Angels & Demons\" \"2000\"\n        , Book \"Dan Brown\" \"The Da Vinci Code\" \"2003\"\n        , Book \"Dan Brown\" \"The Lost Symbol\" \"2009\"\n        , Book \"Dan Brown\" \"Inferno\" \"2013\"\n        , Book \"Dan Brown\" \"Origin\" \"2017\"\n        ]\n        someTable\n\n","type":"List.List item -> UI.Tables.Stateful.StatefulTable msg item columns -> UI.Tables.Stateful.StatefulTable msg item columns"},{"name":"withResponsive","comment":" Allows a table to have a responsive layout when on mobile.\n\n    withResponsive\n        { toDetails = Book.toTableDetails\n        , toCover = Book.toTableCover\n        }\n        someTable\n\n","type":"UI.Tables.Stateful.Responsive msg item columns -> UI.Tables.Stateful.StatefulTable msg item columns -> UI.Tables.Stateful.StatefulTable msg item columns"},{"name":"withWidth","comment":" Applies [`Element.width`](/packages/mdgriffith/elm-ui/latest/Element#width) to the component.\n\n    Table.withWidth\n        (Element.fill |> Element.minimum 220)\n        someTable\n\n","type":"Element.Length -> UI.Tables.Stateful.StatefulTable msg item columns -> UI.Tables.Stateful.StatefulTable msg item columns"}],"binops":[]},{"name":"UI.Tables.Stateless","comment":" Tables are a matrixial data disposition with rows, columns, headers, and cells.\n\n`UI.Tables` are type-safe, which means that every row needs to have the same number of columns (including the headers). Otherwise, compilation fails.\n\n    Stateless.table\n        { columns = Book.tableColumns\n        , toRow = Book.toTableRow\n        }\n        |> Stateless.withWidth (Element.fill |> Element.maximum 640)\n        |> Stateless.withItems\n            [ Book \"Dan Brown\" \"Angels & Demons\" \"2000\"\n            , Book \"Dan Brown\" \"The Da Vinci Code\" \"2003\"\n            , Book \"Dan Brown\" \"The Lost Symbol\" \"2009\"\n            , Book \"Dan Brown\" \"Inferno\" \"2013\"\n            , Book \"Dan Brown\" \"Origin\" \"2017\"\n            ]\n        |> Stateless.renderElement renderConfig\n\nWhere `Book` is:\n\n    type alias Book =\n        { author : String, title : String, year : String }\n\n    tableColumns =\n        columnsEmpty\n            |> column \"Title\" (columnWidthPixels 320)\n            |> column \"Author\" (columnWidthPixels 240)\n            |> column \"Year\" (columnWidthPixels 120)\n\n    toTableRow { author, title, year } =\n        rowEmpty\n            |> rowCellText (Text.body1 title)\n            |> rowCellText (Text.body2 author)\n            |> rowCellText (Text.caption year)\n\n\n# Stateless\n\n@docs StatelessTable, StatelessConfig, table, withItems\n\n\n# Width\n\n@docs withWidth\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"StatelessTable","comment":" The `StatelessTable msg item columns` type is used for describing the component for later rendering.\n\nThis is type that constrains type-safe sized-arrays.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["msg","item","columns"],"cases":[]}],"aliases":[{"name":"StatelessConfig","comment":" Record with parameters for the creation of a [`StatelessTable`](#table).\n\nThis is record that constrains type-safe sized-arrays.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["msg","item","columns"],"type":"{ columns : UI.Tables.Common.Columns columns, toRow : UI.Tables.Common.ToRow msg item columns }"}],"values":[{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Tables.Stateless.StatelessTable msg item columns -> Element.Element msg"},{"name":"table","comment":" Constructs a stateless table from its columns and rows.\n\n    table\n        { columns = Book.tableColumns\n        , toRow = Book.toTableRow\n        }\n\n","type":"UI.Tables.Stateless.StatelessConfig msg item columns -> UI.Tables.Stateless.StatelessTable msg item columns"},{"name":"withItems","comment":" Each of these items will become a row in this table.\n\n    withItems\n        [ Book \"Dan Brown\" \"Angels & Demons\" \"2000\"\n        , Book \"Dan Brown\" \"The Da Vinci Code\" \"2003\"\n        , Book \"Dan Brown\" \"The Lost Symbol\" \"2009\"\n        , Book \"Dan Brown\" \"Inferno\" \"2013\"\n        , Book \"Dan Brown\" \"Origin\" \"2017\"\n        ]\n        someTable\n\n","type":"List.List item -> UI.Tables.Stateless.StatelessTable msg item columns -> UI.Tables.Stateless.StatelessTable msg item columns"},{"name":"withWidth","comment":" Applies [`Element.width`](/packages/mdgriffith/elm-ui/latest/Element#width) to the component.\n\n    Table.withWidth\n        (Element.fill |> Element.minimum 220)\n        someTable\n\n","type":"Element.Length -> UI.Tables.Stateless.StatelessTable msg item columns -> UI.Tables.Stateless.StatelessTable msg item columns"}],"binops":[]},{"name":"UI.Text","comment":" `UI.Text` is a component to specify how text to display text. It applies font size, weight, letter-spacing, and color.\n\n**We discourage the usage of `Element.text` and recommend you to pursuie always using this one instead.**\n\nA text can be created and rendered as in the following pipeline:\n\n    \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n        |> Text.body1\n        |> Text.withColor\n            (Palette.color tonePrimary brightnessDarkest)\n        |> Text.setEllipsis True\n        |> Text.renderElement renderConfig\n        |> Element.el [ Element.width (px 200) ]\n\n\n# Building\n\n@docs Text\n\n\n## Body text\n\n@docs body1, body2\n\n\n## Heading\n\n@docs heading1, heading2, heading3, heading4, heading5, heading6\n\n\n## Subtitle\n\n@docs subtitle1, subtitle2\n\n\n## Other\n\n@docs caption, overline\n\n\n# Combine\n\n@docs multiline, combination\n\n\n# Color\n\n@docs withColor\n\n\n# Ellipsis\n\n@docs setEllipsis\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[],"aliases":[{"name":"Text","comment":" The `Text` type is used for describing the component for later rendering.\n","args":[],"type":"UI.Internal.Text.Text"}],"values":[{"name":"body1","comment":" The biggest size for paragraphs.\n","type":"String.String -> UI.Text.Text"},{"name":"body2","comment":" The smallest size for paragraphs.\n","type":"String.String -> UI.Text.Text"},{"name":"caption","comment":" For writing captions.\n","type":"String.String -> UI.Text.Text"},{"name":"combination","comment":" Combines lines of text with the different styling.\n\n    [ Text.heading6 \"First line of text.\"\n    , Text.body1 \"Second line.\"\n    , Text.caption \"Last line.\"\n    ]\n        |> Text.combination\n        |> Text.renderElement renderConfig\n\n","type":"List.List UI.Text.Text -> UI.Text.Text"},{"name":"heading1","comment":" The biggest title size.\n","type":"String.String -> UI.Text.Text"},{"name":"heading2","comment":" A size for titles.\n","type":"String.String -> UI.Text.Text"},{"name":"heading3","comment":" A size for titles.\n","type":"String.String -> UI.Text.Text"},{"name":"heading4","comment":" A size for titles.\n","type":"String.String -> UI.Text.Text"},{"name":"heading5","comment":" A size for titles.\n","type":"String.String -> UI.Text.Text"},{"name":"heading6","comment":" A size for titles.\n","type":"String.String -> UI.Text.Text"},{"name":"multiline","comment":" Combines lines of text with the same styling.\n\n    [ \"First line of text.\"\n    , \"Second line.\"\n    , \"Last line.\"\n    ]\n        |> Text.multiline Text.body1\n        |> Text.renderElement renderConfig\n\n","type":"(String.String -> UI.Text.Text) -> List.List String.String -> UI.Text.Text"},{"name":"overline","comment":" For writing labels.\n","type":"String.String -> UI.Text.Text"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.Text.Text -> Element.Element msg"},{"name":"setEllipsis","comment":" If `True`, drop the text instead of wrapping it to a new line, append an ellipsis at the end.\n\n    \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n        |> Text.heading3\n        |> Text.setEllipsis True\n        |> Text.renderElement renderConfig\n        |> Element.el [ Element.width (px 42) ]\n\n","type":"Basics.Bool -> UI.Text.Text -> UI.Text.Text"},{"name":"subtitle1","comment":" The biggest size for subtitles.\n","type":"String.String -> UI.Text.Text"},{"name":"subtitle2","comment":" The smallest size for subtitles.\n","type":"String.String -> UI.Text.Text"},{"name":"withColor","comment":" Text colors can variate to varite context or contrast with a background.\nSee [`Palette.color`](UI-Palette#color) and [`Palette.setContrasting`](UI-Palette#setContrasting) for how to compose a valid color value.\n\n    \"Action completed with success!\"\n        |> Text.body1\n        |> Text.withColor\n            (Palette.color Palette.toneSuccess Palette.brightnessMiddle)\n        |> Text.renderElement renderConfig\n\n","type":"UI.Palette.Color -> UI.Text.Text -> UI.Text.Text"}],"binops":[]},{"name":"UI.TextField","comment":" `UI.TextField` is an accessible and customizable interface for text inputs.\nIndicating the type of input data unlocks specific features like mobile's autocompleting, browser's spell-checking, and password-related.\n\nDifferent from [`Element.Input`](/packages/mdgriffith/elm-ui/latest/Element-Input), style is pre-applied following the design documents, and not customizable.\n\n    TextField.email Msg.OnTextFieldChanged\n        \"Enter your email\"\n        model.emailValue\n        |> TextField.setLabelVisible True\n        |> TextField.renderElement renderConfig\n\n**Notes**:\n\n  - Every input must have a label value, even if hidden, for accessibility purposes.\n\n  - Username, email, current password, and search activates in-browser autocomplete capabilities.\n\n  - Username and email content-types may have the same use case scenario (e.g., login, sign up), but the email has an in-browser mask checking.\n\n\n# Building\n\n@docs TextField\n\n\n## Text\n\n@docs singlelineText, multilineText, spellChecked\n\n\n## Password\n\n@docs newPassword, currentPassword, setPasswordVisible\n\n\n## Login\n\n@docs username, email\n\n\n## Search\n\n@docs search\n\n\n## Static\n\n@docs static\n\n\n# Size\n\n@docs withSize\n\n\n# Width\n\n@docs TextFieldWidth, withWidth, widthFull, widthRelative\n\n\n# Accessibility\n\n@docs setLabelVisible, withPlaceholder, withIcon\n\n\n# Interactive\n\n@docs withFocus, withOnEnterPressed, withError\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"TextField","comment":" The `TextField msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]},{"name":"TextFieldWidth","comment":" Describes a compatible width.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"currentPassword","comment":" Wrapper around [`Element.Input.currentPassword` ](/packages/mdgriffith/elm-ui/latest/Element-Input#currentPassword).\n\n    TextField.currentPassword Msg.OnTextFieldChanged\n        \"Current password\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"email","comment":" Wrapper around [`Element.Input.email` ](/packages/mdgriffith/elm-ui/latest/Element-Input#email).\n\n    TextField.email Msg.OnTextFieldChanged\n        \"Email\"\n        model.value\n        |> TextField.setLabelVisible True\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"multilineText","comment":" Wrapper around [`Element.Input.multiline` ](/packages/mdgriffith/elm-ui/latest/Element-Input#multiline).\n\n    TextField.multiline Msg.OnTextFieldChanged\n        \"My cool textarea\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"newPassword","comment":" Wrapper around [`Element.Input.newPassword` ](/packages/mdgriffith/elm-ui/latest/Element-Input#newPassword).\n\n    TextField.newPassword Msg.OnTextFieldChanged\n        \"New password\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of this function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.TextField.TextField msg -> Element.Element msg"},{"name":"search","comment":" Wrapper around [`Element.Input.search` ](/packages/mdgriffith/elm-ui/latest/Element-Input#search).\n\n    TextField.search Msg.OnTextFieldChanged\n        \"Search something\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"setLabelVisible","comment":" Show or hide the text field's label.\n\n    TextField.setLabelVisible True someTextField\n\n","type":"Basics.Bool -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"setPasswordVisible","comment":" Make the password on [`newPassword`](#newPassword) and [`currentPassword`](#currentPassword) visible to the user.\n\n    TextField.setPasswordVisible True someTextField\n\n","type":"Basics.Bool -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"singlelineText","comment":" Wrapper around [`Element.Input.text` ](/packages/mdgriffith/elm-ui/latest/Element-Input#text).\n\n    TextField.singlelineText Msg.OnTextFieldChanged\n        \"My cool input\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"spellChecked","comment":" Wrapper around [`Element.Input.spellChecked` ](/packages/mdgriffith/elm-ui/latest/Element-Input#spellChecked).\n\n    TextField.spellChecked Msg.OnTextFieldChanged\n        \"Spell checking\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"static","comment":" Simulate a [`TextField.singlelineText`](#singlelineText) visually, but the content isn't changeable.\n\n    TextField.static\n        \"Not changeable\"\n        \"Any constant value\"\n\n","type":"String.String -> String.String -> UI.TextField.TextField msg"},{"name":"username","comment":" Wrapper around [`Element.Input.username` ](/packages/mdgriffith/elm-ui/latest/Element-Input#username).\n\n    TextField.username Msg.OnTextFieldChanged\n        \"Username\"\n        model.value\n\n","type":"(String.String -> msg) -> String.String -> String.String -> UI.TextField.TextField msg"},{"name":"widthFull","comment":" The field's width will fill its container.\n","type":"UI.TextField.TextFieldWidth"},{"name":"widthRelative","comment":" The field will have the exact width to fit its contents.\n\n**NOTE**: Default behaviour.\n\n","type":"UI.TextField.TextFieldWidth"},{"name":"withError","comment":" Replaces the text with an error message and make the border red.\n\n    TextField.withError \"Minimum eight caracters.\" someTextField\n\n**NOTE**: Not ready, just make border red by now.\n\n","type":"String.String -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withFocus","comment":" Listen to focus events, add tab-indexing and enforce focus state.\n\n    TextField.withFocus\n        { onEnter = Msg.FocusOnThisField\n        , tabIndex = 1\n        , hasFocus = True\n        }\n        someTextField\n\n","type":"UI.Utils.Focus.Focus msg -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withIcon","comment":" Append an icon to the end of the text field.\n\n    TextField.search Msg.OnTextFieldChanged\n        \"Search something\"\n        model.value\n        |> TextField.withIcon\n            (Icon.search \"Search\")\n\n**NOTE**: Not ready.\n\n","type":"UI.Icon.Icon -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withOnEnterPressed","comment":" Trigger message when the users press return-key while editing the text field.\n\n    TextField.withOnEnterPressed Msg.SubmitField someTextField\n\n","type":"msg -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withPlaceholder","comment":" Place-holds the text field with text.\n\n    TextField.withPlaceholder \"Enter your personal email\" someTextField\n\n","type":"String.String -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withSize","comment":" With `TextField.withSize`, you'll be able to scale the field between the [standard sizes][size].\n\n[size]: UI-Size\n\nThe sizes (in height) are: Large - 60px; Medium - 48px; Small - 36px; Extra Small - 28px.\n\n    TextField.withSize Size.large someField\n\n**NOTE**: TextField's default size is [`Size.medium`](UI-Size#medium)\n\n","type":"UI.Size.Size -> UI.TextField.TextField msg -> UI.TextField.TextField msg"},{"name":"withWidth","comment":" `TextField.withWidth` changes the width of the field.\n\n    TextField.withWidth TextField.widthFull someTextField\n\n","type":"UI.TextField.TextFieldWidth -> UI.TextField.TextField msg -> UI.TextField.TextField msg"}],"binops":[]},{"name":"UI.Utils.ARIA","comment":" Interface for [HTML's ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA).\n\n\n# Building\n\n@docs ElementSemantics, roleButton, roleImage, rolePresentation, roleCheckbox\n\n\n## Radio buttons\n\n@docs roleRadioGroup, roleRadio\n\n\n# Rendering\n\n@docs toElementAttributes\n\n","unions":[{"name":"ElementSemantics","comment":" Roles defines the type of UI element.\n\nSee [MDN article](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Roles).\n\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"roleButton","comment":" \"The button role should be used for clickable elements that trigger a response when activated by the user.\" - MDN\n\n    Element.el\n        (Events.onClick Msg.SomeEvent :: (ARIA.toElementAttributes <| ARIA.roleButton))\n        someChildElement\n\n","type":"UI.Utils.ARIA.ElementSemantics"},{"name":"roleCheckbox","comment":" \"The checkbox role is used for checkable interactive controls.\" -MDN\n\n    Element.row\n        (ARIA.toElementAttributes <| ARIA.roleCheckbox False)\n        [ notCheckedIcon\n        , Element.text \"I accept the Terms of Service\"\n        ]\n\n","type":"Basics.Bool -> UI.Utils.ARIA.ElementSemantics"},{"name":"roleImage","comment":" \"Can be used to identify multiple elements inside page content that should be considered as a single image.\" - MDN\n\n    Element.el\n        (ARIA.toElementAttributes <| ARIA.roleImage altText)\n        [ Element.text \"😺 Meow\" ]\n\n","type":"String.String -> UI.Utils.ARIA.ElementSemantics"},{"name":"rolePresentation","comment":" \"An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element)\" - W3C\n\n    Element.el\n        (ARIA.toElementAttributes <| ARIA.rolePresentation)\n        totallyRedundantElement\n\n","type":"UI.Utils.ARIA.ElementSemantics"},{"name":"roleRadio","comment":" \"A checkable input in a group of elements with the same role, only one of which can be checked at a time.\" - W3C\n\n    Element.row\n        (ARIA.toElementAttributes <| ARIA.roleRadio True)\n        [ checkedIcon\n        , Element.text \"Chocolate\"\n        ]\n\n","type":"Basics.Bool -> UI.Utils.ARIA.ElementSemantics"},{"name":"roleRadioGroup","comment":" \"A radiogroup is a type of select list that can only have a single entry checked at any one time.\" - W3C\n\n    Element.column\n        (ARIA.toElementAttributes <| ARIA.roleRadioGroup \"Pick an ice cream flavor\")\n        [ chocolateIceCream\n        , strawberryIceCream\n        ]\n\n","type":"String.String -> UI.Utils.ARIA.ElementSemantics"},{"name":"toElementAttributes","comment":" Transform a [`ElementSemantics`](#ElementSemantics) in a list of [`Element.Attribute`](/packages/mdgriffith/elm-ui/latest/Element#Attribute).\n","type":"UI.Utils.ARIA.ElementSemantics -> List.List (Element.Attribute msg)"}],"binops":[]},{"name":"UI.Utils.Element","comment":" Utilities and functionality that are not covered by Elm UI.\n\n\n# Color\n\n@docs colorSetOpacity, colorTransition\n\n\n# Responsiveness\n\n@docs desktopMaximum\n\n\n# HTML features\n\n@docs svg, title, ellipsis, maxHeightVH, maxHeightPct\n\n\n# Input\n\n@docs disabled, onEnterPressed, onIndividualClick\n\n\n# Padding, borders and size\n\n@docs RectangleSides, zeroPadding\n\n","unions":[],"aliases":[{"name":"RectangleSides","comment":" The classic top, left, right and bottom as integers record.\n","args":[],"type":"{ top : Basics.Int, left : Basics.Int, right : Basics.Int, bottom : Basics.Int }"}],"values":[{"name":"colorSetOpacity","comment":" Overwrite alpha value in an [`Element.Color`](/packages/mdgriffith/elm-ui/latest/Element#Color).\n","type":"Basics.Float -> Element.Color -> Element.Color"},{"name":"colorTransition","comment":" Enable CSS transition for HTML's `color, background-color, border-color`.\nTime is set in miliseconds.\n\n    Element.el\n        (Background.color someVariatingColor :: Element.colorTransition 200)\n        someChildElement\n\n","type":"Basics.Int -> List.List (Element.Attribute msg)"},{"name":"desktopMaximum","comment":" Limit [`Element.fill`](/packages/mdgriffith/elm-ui/latest/Element#fill) only when on desktop.\n\n    Element.width (Element.desktopMaximum 640)\n\n","type":"UI.RenderConfig.RenderConfig -> Basics.Int -> Element.Length"},{"name":"disabled","comment":" All the attributes that define an element as disabled for modifying.\n\n    Element.el Element.disabled <| Element.text \"Some content\"\n\n","type":"List.List (Element.Attribute msg)"},{"name":"ellipsis","comment":" Applies required CSS values to have ellipsis on an element's text when width is not enough for displaying the whole content.\n\n    Element.el\n        (Element.width (px 200) :: Element.ellipsis)\n        (Element.text \"Lorem ipsum dolor sit amet, consectetur adipiscing elit\")\n\n","type":"List.List (Element.Attribute msg)"},{"name":"maxHeightPct","comment":" Wrapper for CSS's `max-height: {{vaue}}%`.\n\n    Element.el [ Element.maxHeightPct 100 ] someChildElement\n\n","type":"Basics.Float -> Element.Attribute msg"},{"name":"maxHeightVH","comment":" Wrapper for CSS's `max-height: {{vaue}}vh`.\n\n    Element.el [ Element.maxHeightVH 100 ] someChildElement\n\n","type":"Basics.Int -> Element.Attribute msg"},{"name":"onEnterPressed","comment":" Trigger message when the users press return-key while element is on-focus.\n\n    Element.el [ Element.onEnterPressed Msg.ActivateSomething ] someChildElement\n\n","type":"msg -> Element.Attribute msg"},{"name":"onIndividualClick","comment":" Equivalent to [`Element.onClick`](/packages/mdgriffith/elm-ui/latest/Element#fill) with `stopPropagation` and `preventDefault` applied.\n\n    Element.el\n        [ Element.onIndividualClick Msg.CoolTextClicked ]\n        (Element.text \"Cool text\")\n\n","type":"msg -> Element.Attribute msg"},{"name":"svg","comment":" The SVG element, with ARIA attributes applied.\n\n    svg \"Alt text\" svgAttributes svgContent\n\n","type":"String.String -> List.List (Svg.Attribute msg) -> List.List (Svg.Svg msg) -> Element.Element msg"},{"name":"title","comment":" \"The title attribute specifies extra information about an element.\n\nThe information is most often shown as a tooltip text when the mouse moves over the element.\" - W3Schools\n\n    Element.el [ Element.title \"Some text\" ] someChildElement\n\n","type":"String.String -> Element.Attribute msg"},{"name":"zeroPadding","comment":" Zero-initialized record for paddings and borders.\n\n    Element.paddingEach\n        { zeroPadding | bottom = 20 }\n\n","type":"UI.Utils.Element.RectangleSides"}],"binops":[]},{"name":"UI.Utils.Focus","comment":" Unified configuration for managing focus on components.\n\n\n# Configuration\n\n@docs Focus\n\n\n# Element Attributes\n\n@docs toElementAttributes\n\n","unions":[],"aliases":[{"name":"Focus","comment":" Required configuration for managing focus.\n\n    { onEnter = Msg.OnFocusEnterThisComponent\n    , tabIndex = 2\n    , hasFocus = False\n    }\n\n`hasFocus` can be used for enforcing focus when loading a new page.\n\n","args":["msg"],"type":"{ onEnter : msg, tabIndex : Basics.Int, hasFocus : Basics.Bool }"}],"values":[{"name":"toElementAttributes","comment":" Applies [`Focus`]`#Focus` into Elm UI attributes.\n\n    Element.el [ focusAttributes someConfig ] <|\n        Element.text \"Some content\"\n\n","type":"UI.Utils.Focus.Focus msg -> List.List (Element.Attribute msg)"}],"binops":[]},{"name":"UI.Utils.TypeNumbers","comment":" This module contains phantom-types for helping guarantee lengths in collectibles.\n\nThe UI.Table uses this for constraining all rows dimensions.\n\n    type alias CoolTable columns =\n        { header : NList String columns\n        , rows : NLIst Int columns\n        }\n\n\n# Primitives\n\n@docs Zero, Increase\n\n\n# Descendents\n\n@docs One, Two, Three, Four, Five, Six, Seven, Eight, Nine\n\n","unions":[{"name":"Increase","comment":" Represents an recursively incremented size.\n\n    pushItem : Items n -> Items (Increase n)\n\n    popItem : Items (Increase n) -> Items n\n\n","args":["a"],"cases":[]}],"aliases":[{"name":"Eight","comment":" Equivalent to `(Increase Seven)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Seven"},{"name":"Five","comment":" Equivalent to `(Increase Four)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Four"},{"name":"Four","comment":" Equivalent to `(Increase Three)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Three"},{"name":"Nine","comment":" Equivalent to `(Increase Eight)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Eight"},{"name":"One","comment":" Equivalent to `(Increase Zero)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Zero"},{"name":"Seven","comment":" Equivalent to `(Increase Six)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Six"},{"name":"Six","comment":" Equivalent to `(Increase Five)`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Five"},{"name":"Three","comment":" Equivalent to `(Increase (Increase (Increase Zero)))`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.Two"},{"name":"Two","comment":" Equivalent to `(Increase (Increase Zero))`\n","args":[],"type":"UI.Utils.TypeNumbers.Increase UI.Utils.TypeNumbers.One"},{"name":"Zero","comment":" Represents the size of an empty set.\n","args":[],"type":"Basics.Never"}],"values":[],"binops":[]}]