[{"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# Optional\n\n@docs withGenericIcon, withInlineStyle\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"},{"name":"withGenericIcon","comment":" Displays an icon in the right side of the alert, depending on its color scheme.\n\n    - Primary: Won't show any icon;\n    - Success: Shows [UI.Icon.check](UI-Icon#check);\n    - Warning: Will show a loading spinner;\n    - Danger: Shows [UI.Icon.warning](UI-Icon#warning).\n\n","type":"UI.Alert.Alert msg -> UI.Alert.Alert msg"},{"name":"withInlineStyle","comment":" Inline style makes the alert's corners rounded\n","type":"UI.Alert.Alert msg -> UI.Alert.Alert msg"}],"binops":[]},{"name":"UI.Analytics","comment":" Analytics serialization.\n\n\n# Analytics\n\n@docs Analytics\n\n\n# Serialization\n\n@docs Property, encode\n\n","unions":[],"aliases":[{"name":"Analytics","comment":" Analytics event data.\n","args":[],"type":"UI.Internal.Analytics.Analytics"},{"name":"Property","comment":" A list of properties to use with`Json.Encode.object`.\n","args":[],"type":"UI.Internal.Analytics.Property"}],"values":[{"name":"encode","comment":" Encodes Analytics into a list of properties.\n\nUse it with `Json.Encode.object` to describe your event:\n\n        import UI.Analytics\n        import Json.Encode as Encode\n\n        encodeEvent : Analytics -> Value\n        encodeEvent event =\n            ( \"name\", Encode.string \"EventName\" )\n                :: UI.Analytics.encode event\n                |> Encode.object\n\n","type":"UI.Analytics.Analytics -> List.List UI.Analytics.Property"}],"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, Gray & Outline.\nBrightness can also variate using the palette's brightness values with [`Badge.withBrightness`](UI-Palette#withBrightness).\nOptionally, an icon can be added to a badge if required.\n\nA badge can be created and rendered as in the following pipeline:\n\n    Element.row []\n        [ -- Some cool content\n        , Badge.grayDark (String.fromInt (List.length someList))\n            |> Badge.renderElement renderConfig\n            |> Element.el [ Element.alignTop ]\n        ]\n\nIf you need a badge with an icon, this can be specified with just an additional step, as below:\n\n    Element.row []\n        [ -- Some cool content\n        , Badge.grayDark (String.fromInt (List.length someList))\n            |> Badge.withIcon (Icon.packages \"Packages\")\n            |> Badge.renderElement renderConfig\n            |> Element.el [ Element.alignTop ]\n        ]\n\n\n# Building\n\n@docs Badge\n\n\n## Light\n\n@docs grayLight, primaryLight, successLight, warningLight, dangerLight, outlineLight\n\n\n## Dark\n\n@docs grayDark, primaryDark, successDark, warningDark, dangerDark, outlineDark\n\n\n# Options\n\n@docs withTone, withIcon\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":"dangerDark","comment":" A variation of the badge with danger-tone.\n\n    Badge.dangerDark \"ERROR\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"dangerLight","comment":" A light variation of the badge with danger-tone.\n\n    Badge.dangerLight \"ERROR\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"grayDark","comment":" A dark grayish variation of the badge.\n\n    Badge.grayDark \"EMPTY\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"grayLight","comment":" A light grayish variation of the badge.\n\n    Badge.grayLight \"EMPTY\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"outlineDark","comment":" A variation of the badge with a dark gray outline, intended for usage with lighter backgrounds.\n\n    Badge.outlineDark \"SENT\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"outlineLight","comment":" A variation of the badge with a light gray outline, intended for usage with darker backgrounds.\n\n    Badge.outlineLight \"SENT\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"primaryDark","comment":" A primary-color variation of the badge.\n\n    Badge.primaryDark \"NEW\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"primaryLight","comment":" A light primary-color variation of the badge.\n\n    Badge.primaryLight \"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":"successDark","comment":" A variation of the badge with success-tone.\n\n    Badge.successDark \"SENT\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"successLight","comment":" A light variation of the badge with success-tone.\n\n    Badge.successLight \"SENT\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"warningDark","comment":" A variation of the badge with warning-tone.\n\n    Badge.warningDark \"0\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"warningLight","comment":" A light variation of the badge with warning-tone.\n\n    Badge.warningLight \"0\"\n\n","type":"String.String -> UI.Badge.Badge"},{"name":"withIcon","comment":" A variation of the badge with an icon.\n\n    Badge.primaryLight \"NEW\"\n        |> Badge.withIcon (Icon.car \"Car\")\n\n","type":"UI.Icon.Icon -> UI.Badge.Badge -> UI.Badge.Badge"},{"name":"withTone","comment":" Replaces the tone of a badge with a new one.\n\n    Badge.successLight \"status\"\n        |> (if model.requestStatus == Model.Failed then\n                Badge.withTone Badge.dangerLight\n\n            else\n                identity\n           )\n        |> Badge.renderElement renderConfig\n\n","type":"(String.String -> UI.Badge.Badge) -> 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, disabled, cmd, redirect\n\n\n# Content\n\n@docs ButtonBody, fromLabel, fromIcon\n@docs fromLabeledOnLeftIcon, fromLabeledOnRightIcon\n\n\n# Style\n\n@docs ButtonStyle, hyperlink, primary, danger, light, clear, switchedOn\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\n\n\n# Identification\n\n@docs withId\n\n\n# Rendering\n\n@docs renderElement\n\n\n# Component handling\n\n@docs map\n\n","unions":[],"aliases":[{"name":"Button","comment":" The `Button msg` type is used for describing the component for later rendering.\n","args":["msg"],"type":"UI.Internal.Button.Button msg"},{"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":[],"type":"UI.Internal.Button.ButtonBody"},{"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":[],"type":"UI.Internal.Button.ButtonStyle"},{"name":"ButtonWidth","comment":" Describes a compatible width.\n","args":[],"type":"UI.Internal.Button.ButtonWidth"}],"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":"fromLabeledOnLeftIcon","comment":" `Button.fromLabeledOnLeftIcon` initiates a button's body with icon-content and it's label on the left.\n\n    Button.fromLabeledOnLeftIcon (Icon.map \"Go to maps\")\n\n","type":"UI.Icon.Icon -> UI.Button.ButtonBody"},{"name":"fromLabeledOnRightIcon","comment":" `Button.fromLabeledOnRightIcon` initiates a button's body with icon-content and it's label on the right.\n\n    Button.fromLabeledOnRightIcon (Icon.map \"Go to maps\")\n\n","type":"UI.Icon.Icon -> 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":"switchedOn","comment":" The switched on state for a button. Any active button can be in a a possible \"On\" state.\n","type":"UI.Button.ButtonStyle"},{"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":"withId","comment":" With `Button.withId`, you can add an [HTML ID attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) to the button element.\n\n    Button.withId (Just \"id\") someButton\n\n","type":"Maybe.Maybe String.String -> 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":"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    Checkbox.checkbox \"I agree with terms of service.\"\n        Msg.ToggleThis\n        True\n        |> Checkbox.renderElement renderConfig\n\n\n# Building\n\n@docs Checkbox, checkbox\n\n\n# Label\n\n@docs withHiddenLabel\n\n\n# Size\n\n@docs CheckboxSize, withSize, sizeSM, sizeMD\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Checkbox","comment":" The `Checkbox msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]},{"name":"CheckboxSize","comment":" The different sizes the Checkbox can take\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"checkbox","comment":" Defines all the required properties for creating a checkbox.\n\n    checkbox \"Buy Milk\"\n        (Msg.ProductListSet Milk)\n        True\n\n","type":"String.String -> (Basics.Bool -> msg) -> Basics.Bool -> UI.Checkbox.Checkbox 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.Checkbox.Checkbox msg -> Element.Element msg"},{"name":"sizeMD","comment":" Medium-sized Checkbox\n","type":"UI.Checkbox.CheckboxSize"},{"name":"sizeSM","comment":" Small-sized Checkbox\n","type":"UI.Checkbox.CheckboxSize"},{"name":"withHiddenLabel","comment":" Hide the checkbox's label.\n\n    Checkbox.withHiddenLabel someCheckbox\n\n","type":"UI.Checkbox.Checkbox msg -> UI.Checkbox.Checkbox msg"},{"name":"withSize","comment":" `Checkbox.withSize` changes the size of the Checkbox\n\n    Checkbox.withSize Checkbox.sizeMD someCheckbox\n\n","type":"UI.Checkbox.CheckboxSize -> UI.Checkbox.Checkbox msg -> UI.Checkbox.Checkbox msg"}],"binops":[]},{"name":"UI.ContentPlaceholder","comment":" `UI.ContentPlaceholders` fills space in an area that is waiting for some action from the user.\n\nAn content-placeholder can be created and rendered as in the following pipeline:\n\n    ContentPlaceholders.custom\n        { icon = Icon.fix\n        , title = \"Select A Group\"\n        , body = \"Please select a group to fix from the list on the left.\"\n        }\n        |> ContentPlaceholders.withSize Size.large\n        |> ContentPlaceholders.renderElement renderConfig\n\nThere are also some ready-to-use costructors.\n\n\n# Building\n\n@docs ContentPlaceholder\n@docs custom\n\n\n# Common values\n\n@docs nothingToSeeHere\n\n\n# Size\n\n@docs withLargeSize\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"ContentPlaceholder","comment":" The `ContentPlaceholder` type is used for describing the component for later rendering.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"custom","comment":" Constructs a generic `ContentPlaceholder`.\n\n    ContentPlaceholders.custom\n        { icon = Icon.download\n        , title = \"Pick a file\"\n        , body = \"Please select a file to download it.\"\n        }\n        |> ContentPlaceholders.renderElement renderConfig\n\n","type":"{ icon : String.String -> UI.Icon.Icon, title : String.String, body : String.String } -> UI.ContentPlaceholder.ContentPlaceholder"},{"name":"nothingToSeeHere","comment":" One of the ready-to-use constructors.\nUsed in impossible-states and empty unmanaged lists.\n\n    ContentPlaceholders.nothingToSeeHere\n        |> ContentPlaceholders.renderElement renderConfig\n\n","type":"UI.ContentPlaceholder.ContentPlaceholder"},{"name":"renderElement","comment":" End of the builder's life.\nThe result of component function is a ready-to-insert Elm UI's Element.\n","type":"UI.RenderConfig.RenderConfig -> UI.ContentPlaceholder.ContentPlaceholder -> Element.Element msg"},{"name":"withLargeSize","comment":" With `withLargeSize`, you'll have a larger `ContentPlaceholder`.\n\n    ContentPlaceholders.withLargeSize somePlaceholder\n\n**NOTE**: Default size is [`Size.medium`](UI-Size#medium).\n\n","type":"UI.ContentPlaceholder.ContentPlaceholder -> UI.ContentPlaceholder.ContentPlaceholder"}],"binops":[]},{"name":"UI.DatePicker","comment":" The `UI.DatePicker` is a component that displays a calendar for the user to pick a date.\n\n        DatePicker.singleDatePicker\n            { toExternalMsg = Msg.ToDatePicker\n            , onSelectMsg = Msg.SelectDate\n            }\n            model.datePickerModel\n            model.maybeSelectedDate\n            |> DatePicker.withTodaysMark appConfig.timeNow\n            |> DatePicker.renderElement appConfig.renderConfig\n\n\n# Building\n\n@docs DatePicker, singleDatePicker\n\n\n# Options\n\n@docs withTodaysMark, withRangeLimits\n\n\n# Rendering\n\n@docs renderElement\n\n\n# Model management\n\n@docs Model, init, Msg, update\n\n","unions":[{"name":"DatePicker","comment":" The `DatePicker msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]},{"name":"Model","comment":" The Model holding current viewing month and year.\n","args":[],"cases":[]},{"name":"Msg","comment":" Contains a pre-defined datapicker's change.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"init","comment":" Creates the starting Model. It receives an initial date for focusing its month and year.\n\nNOTE: This does not selects the said date, just start by displaying its month.\n\n","type":"Calendar.Date -> UI.DatePicker.Model"},{"name":"renderElement","comment":" Show the datapicker.\n","type":"UI.RenderConfig.RenderConfig -> UI.DatePicker.DatePicker msg -> Element.Element msg"},{"name":"singleDatePicker","comment":" Allows picking a single date\n\n    singleDatePicker\n        { toExternalMsg = Msg.ToDatePicker\n        , onSelectMsg = Msg.SelectDate\n        }\n        model.datePickerModel\n        model.maybeSelectedDate\n\n","type":"{ toExternalMsg : UI.DatePicker.Msg -> msg, onSelectMsg : Calendar.Date -> msg } -> UI.DatePicker.Model -> Maybe.Maybe Calendar.Date -> UI.DatePicker.DatePicker msg"},{"name":"update","comment":" The update function.\n","type":"UI.DatePicker.Msg -> UI.DatePicker.Model -> ( UI.DatePicker.Model, UI.Effects.Effects msg )"},{"name":"withRangeLimits","comment":" Limits the days that can be selected to a specific range.\n\nNOTE: This function does not validate/change the current viewing month or selected date.\n\n","type":"Maybe.Maybe Calendar.Date -> Maybe.Maybe Calendar.Date -> UI.DatePicker.DatePicker msg -> UI.DatePicker.DatePicker msg"},{"name":"withTodaysMark","comment":" Mark today's day with a single blue dot below it.\n","type":"Calendar.Date -> UI.DatePicker.DatePicker msg -> UI.DatePicker.DatePicker msg"}],"binops":[]},{"name":"UI.Dialog","comment":" The `UI.Dialog` is a component for displaying dialogs and modals.\n\nUser must specify a title and an icon to be displayed in the title to construct\nit. Body and buttons can be specified optionally as in the following pipeline:\n\n    dialog \"Title\" Icon.warning closeMsg\n        |> withBody (\"Body text\" |> Text.body2 |> Text.renderElement cfg)\n        |> withButtons buttons\n\n\n# Building\n\n@docs Dialog, dialog\n\n\n# Content\n\n@docs withBody, withButtons\n\n\n# Component handling\n\n@docs map\n\n","unions":[{"name":"Dialog","comment":" The `Dialog msg` type is used for describing the component for later\nrendering.\n","args":["msg"],"cases":[["Dialog",["UI.Dialog.Properties","UI.Dialog.Options msg"]]]}],"aliases":[],"values":[{"name":"dialog","comment":" Constructs a dialog by receiving its title and an icon in the title.\n","type":"String.String -> UI.Icon.Icon -> UI.Dialog.Dialog msg"},{"name":"map","comment":" Transforms the message produced by the component.\n","type":"(a -> b) -> UI.Dialog.Dialog a -> UI.Dialog.Dialog b"},{"name":"withBody","comment":" With `Dialog.withBody` you can specify the body of the dialog.\n\n**Note**: By default, the body is `Element.none`\n\n","type":"Element.Element msg -> UI.Dialog.Dialog msg -> UI.Dialog.Dialog msg"},{"name":"withButtons","comment":" With `Dialog.withButtons` you can specify the buttons for the footer of the\ndialog.\n\n**Note**: By default, the buttons are an empty list\n\n","type":"List.List (UI.Button.Button msg) -> UI.Dialog.Dialog msg -> UI.Dialog.Dialog msg"}],"binops":[]},{"name":"UI.Document","comment":" The `UI.Document` is paack-ui's page presenter and document.\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 [`Document.Page`](#Page) record.\nThat aggregated with the current rendering configuration provided by [`UI.RenderConfig`](UI-RenderConfig#RenderConfig) and the [`Document.Model`](#Model), 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 { documentModel, currentPage } =\n        Document.document Msg.DocumentMsg\n            documentModel\n            (getPagePage >> Document.pageMap Msg.PageMsg)\n            |> Document.withMenuPages\n                [ Document.menuPage (Icon.packages \"Packages\")\n                    (Link.link \"/packages\")\n                    (currentPage == Page.Packages)\n                ]\n            |> Document.withMenuActions\n                [ Document.menuAction\n                    (Icon.logout \"Logout\")\n                    Msg.SessionLogout\n                ]\n            |> Document.withMenuLogo \"My company's logo\" someLogoElement\n            |> Document.toBrowserDocument renderConfig currentPage\n\n    getPagePage : Page.Page -> Document.Page Page.Msg\n    getPagePage page =\n        case page of\n            Page.Packages pageModel ->\n                Document.page \"Packages\"\n                    (Document.bodySingle <| Packages.view pageModel)\n                    |> Document.pageWithDialog pageModel.maybeDialog\n                    |> Document.pageWithDefaultMenu\n\n\n# Model & Update\n\n@docs Msg, Model, modelInit, modelWithClosedMenu, modelUpdate, modelUpdateWithoutPerform\n\n\n# Building\n\n@docs Document, document\n\n\n# Page\n\n@docs Page, page, pageWithDialog, pageWithDefaultMenu, pageMap\n\n\n# PageBody\n\n@docs PageBody, bodySingle, Stack, bodyStack\n\n\n# Menu\n\n@docs withMenuLogo, withMenuActions, MenuAction, menuAction, withMenuPages, withExtraHtml\n@docs MenuPage, menuPage, withSidebarStyle, sidebarPersistent\n@docs sidebarNonPersistent, withLegacyTransitionMenuStyle, showMenu, hideMenu\n\n\n# Rendering\n\n@docs toBrowserDocument\n\n","unions":[{"name":"Document","comment":" The `Document.Document` handles menu, dialogs and page viewing.\nIt must be initialized using [`Document.document`](#document).\n","args":["pageSet","msg"],"cases":[]},{"name":"MenuAction","comment":" This record must be generated with [`Document.menuAction`](#menuAction)\n","args":["msg"],"cases":[]},{"name":"MenuPage","comment":" This record must be generated with [`Document.menuPage`](#menuPage)\n","args":[],"cases":[]},{"name":"Model","comment":" Keep this one in your Model, it holds the current navigation state.\n","args":[],"cases":[]},{"name":"Msg","comment":" The `Document.Msg` handles menu related messages.\n","args":[],"cases":[]},{"name":"Page","comment":" The `Document.Page 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 = Document.bodySingle <| Element.el [] [ Element.text \"Element body\" ]\n    , title = \"Example page\"\n    , dialog = Nothing -- or Just <| Document.dialog <| ...\n    , hasMenu = True\n    }\n\n","args":["msg"],"cases":[]}],"aliases":[{"name":"PageBody","comment":" The `Document.PageBody 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"],"type":"UI.Internal.Page.PageBody msg"},{"name":"Stack","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":"UI.Internal.Page.Stack msg"}],"values":[{"name":"bodySingle","comment":" `Document.bodySingle` indicates that the current page is a simple single page.\nIt expects the final page's view in the only parameter.\n\n    Document.bodySingle <| view renderConfig model\n\n","type":"Element.Element msg -> UI.Document.PageBody msg"},{"name":"bodyStack","comment":" `Document.bodyStack` 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    Document.bodyStack\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.Document.Stack msg -> Element.Element msg -> UI.Document.PageBody msg"},{"name":"document","comment":" `Document.document` 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 [`Document.Msg`](#Msg) in a message type controlled by the user.\n\nThe second is the current [`Document.Model`](#Model), 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    Document.Document Msg.FromNav\n        model.documentModel\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.Document.Msg -> msg) -> UI.Document.Model -> (pageSet -> UI.Document.Page msg) -> UI.Document.Document pageSet msg"},{"name":"hideMenu","comment":" Message to force hiding the sidebar/menu.\n","type":"UI.Document.Msg"},{"name":"menuAction","comment":" `Document.menuPage` describes an action to [`Document.withMenuActions`](#withMenuActions).\n\n    Document.menuAction\n        (Icon.logout \"Logout\")\n        Msg.SessionLogout\n\n","type":"UI.Icon.Icon -> msg -> UI.Document.MenuAction msg"},{"name":"menuPage","comment":" `Document.menuPage` describes a page to [`Document.withMenuPages`](#withMenuPages).\n\n    Document.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.Document.MenuPage"},{"name":"modelInit","comment":" The default way of instantiating a [`Document.Model`](#Model).\n\n    Document.modelInit renderConfig\n\n","type":"UI.RenderConfig.RenderConfig -> UI.Document.Model"},{"name":"modelUpdate","comment":" Given a message, apply an update to the [`Document.Model`](#Model).\n","type":"UI.Document.Msg -> UI.Document.Model -> ( UI.Document.Model, Platform.Cmd.Cmd UI.Document.Msg )"},{"name":"modelUpdateWithoutPerform","comment":" Similar to [`modelUpdate`], but using Effects.\n","type":"UI.Document.Msg -> UI.Document.Model -> ( UI.Document.Model, UI.Effects.Effects UI.Document.Msg )"},{"name":"modelWithClosedMenu","comment":" Force the menu to be closed on the [`Document.Model`](#Model).\n\n    Document.modelInitWithClosedMenu renderConfig\n\n","type":"UI.Document.Model -> UI.Document.Model"},{"name":"page","comment":" Initializes a page's description\n\n    Document.page \"My page's title\"\n        (Document.bodySingle <| SomePage.view somePageModel)\n\n","type":"String.String -> UI.Document.PageBody msg -> UI.Document.Page msg"},{"name":"pageMap","comment":" Transform the messages produced by a container.\n","type":"(a -> b) -> UI.Document.Page a -> UI.Document.Page b"},{"name":"pageWithDefaultMenu","comment":" Make the document's default menu available in this page.\n\n    Document.pageWithDefaultMenu\n        someDocumentPage\n\n","type":"UI.Document.Page msg -> UI.Document.Page msg"},{"name":"pageWithDialog","comment":" Overlay (or not) a dialog over the page.\n\n    Document.pageWithDialog\n        (Just <| Element.text \"Hello World\")\n        someDocumentPage\n\n","type":"Maybe.Maybe (UI.Dialog.Dialog msg) -> UI.Document.Page msg -> UI.Document.Page msg"},{"name":"showMenu","comment":" Message to force the exhibition of the sidebar/menu.\n","type":"UI.Document.Msg"},{"name":"sidebarNonPersistent","comment":" Non-persistent style of the sidebar. Like the mobile sidebar, this style\nmakes the sidebar open over the content with an overlay behind it.\n","type":"UI.Document.SidebarStyle"},{"name":"sidebarPersistent","comment":" Persistent style of the sidebar. It occupies more space when open pushing\nthe content right.\n","type":"UI.Document.SidebarStyle"},{"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    Document.toBrowserDocument renderConfig currentPage document\n\n","type":"UI.RenderConfig.RenderConfig -> pageSet -> UI.Document.Document pageSet msg -> { body : List.List (Html.Html msg), title : String.String }"},{"name":"withExtraHtml","comment":" `Document.withExtraHtml` allows injecting unrelated elements in the page.\n","type":"List.List (Html.Html msg) -> UI.Document.Document page msg -> UI.Document.Document page msg"},{"name":"withLegacyTransitionMenuStyle","comment":" `Document.withLegacyTransitionMenuStyle` takes a Legacy `SidebarStyle` setting the\nappearance/behavior of the sidebar when it is enabled by the `hasMenu` flag.\n","type":"UI.Document.Document page msg -> UI.Document.Document page msg"},{"name":"withMenuActions","comment":" `Document.withMenuActions` replaces the list of the menu's actions.\nTherefore changing the list of items showed at the bottom of the sidebar.\n\n    Document.withMenuActions\n        [ Document.menuAction\n            (Icon.language \"Change to English\")\n            (Msg.SetLanguage Lang.English)\n        , Document.menuAction\n            (Icon.logout \"Logout\")\n            Msg.SessionLogout\n        ]\n        someNav\n\n","type":"List.List (UI.Document.MenuAction msg) -> UI.Document.Document page msg -> UI.Document.Document page msg"},{"name":"withMenuLogo","comment":" `Document.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    Document.withMenuLogo \"Paack - Time Matters\"\n        Vectors.paackLogoWhite\n        someNav\n\n","type":"String.String -> Element.Element msg -> UI.Document.Document page msg -> UI.Document.Document page msg"},{"name":"withMenuPages","comment":" `Document.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    Document.withMenuPages\n        [ Document.menuPage (Icon.edit \"Manage cards\")\n            (Link.link \"/edit-cards\")\n            (currentPage == Page.CardsEdit)\n        , Document.menuPage (Icon.add \"New manager\")\n            (Link.link \"/add-manager\")\n            (currentPage == Page.ManagerAdd)\n        ]\n        someNav\n\n","type":"List.List UI.Document.MenuPage -> UI.Document.Document page msg -> UI.Document.Document page msg"},{"name":"withSidebarStyle","comment":" `Document.withSidebarStyle` takes a `SidebarStyle` setting the\nappearance/behavior of the sidebar when it is enabled by the `hasMenu` flag.\n","type":"UI.Document.SidebarStyle -> UI.Document.Document page msg -> UI.Document.Document page msg"}],"binops":[]},{"name":"UI.Dropdown","comment":" Accessible and uniform-styled implementation of a dropdown menu.\n\n    Dropdown.basic\n        { dropdownMsg = ForDropdownMsg\n        , onSelectMsg = GotSelectItemMsg\n        , state = model.dropdownState\n        }\n        |> Dropdown.withPlaceholder \"Choose a book\"\n        |> Dropdown.withItems model.books\n        |> Dropdown.withSelected model.selectedBook\n        |> Dropdown.withItemToText Books.getTitle\n        |> Dropdown.renderElement renderConfig\n\n\n# Dropdown\n\n@docs Dropdown, BasicConfig, basic, filterable\n\n\n## State\n\n@docs State, Msg, init, update\n\n\n# Options\n\n@docs withPlaceholder, withFilterPlaceholder, withItems, withSelected\n@docs withItemToText, withItemToPrompt\n@docs withMaximumListHeight, withListWidth, withListAlignedRight\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Dropdown","comment":" The `Dropdown item msg` type is used for describing the component for later rendering.\n","args":["item","msg"],"cases":[]},{"name":"Msg","comment":" Opaque type for the internal dropdown messages\n","args":["item"],"cases":[]},{"name":"State","comment":" Keep this one in your Model, it holds the dropdown's current state.\n","args":["item"],"cases":[]}],"aliases":[{"name":"BasicConfig","comment":" `BasicConfig` assembles the required configuration for having a simple dropdown.\n\n    { dropdownMsg = ForDropdownMsg\n    , onSelectMsg = GotSelectItemMsg\n    , state = model.dropdownState\n    }\n\n","args":["item","msg"],"type":"{ dropdownMsg : UI.Dropdown.Msg item -> msg, onSelectMsg : Maybe.Maybe item -> msg, state : UI.Dropdown.State item }"}],"values":[{"name":"basic","comment":" Constructs a basic dropdown.\nAlso defines the handling function for messages, and the current dropdown's state.\n\n    Dropdown.basic\n        { dropdownMsg = ForDropdownMsg\n        , onSelectMsg = GotSelectItemMsg\n        , state = model.dropdownState\n        }\n\n","type":"UI.Dropdown.BasicConfig item msg -> UI.Dropdown.Dropdown item msg"},{"name":"filterable","comment":" Constructs a filterable dropdown.\nAlso defines the handling function for messages, and the current dropdown's state.\n\n    Dropdown.filterable\n        { dropdownMsg = ForDropdownMsg\n        , onSelectMsg = GotSelectItemMsg\n        , state = model.dropdownState\n        }\n\n","type":"UI.Dropdown.BasicConfig item msg -> UI.Dropdown.Dropdown item msg"},{"name":"init","comment":" The correct way of instantiating a [`Dropdown.State`](#State).\n\n    { -- ...\n    , state = Dropdown.init \"dropdown-id\"\n    -- ...\n    }\n\n","type":"String.String -> UI.Dropdown.State item"},{"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.Dropdown.Dropdown item msg -> Element.Element msg"},{"name":"update","comment":" Given a message, apply an update to the [`Dropdown.State`](#State).\nDo not ignore the returned `Effect`, it may include remote select's messages.\n\n    ( newModel, newCmd ) =\n        Dropdown.update renderConfig subMsg dropdown\n\n","type":"UI.RenderConfig.RenderConfig -> UI.Dropdown.Msg item -> UI.Dropdown.Dropdown item msg -> ( UI.Dropdown.State item, UI.Effects.Effects msg )"},{"name":"withFilterPlaceholder","comment":" Changes the filterable component's placeholder text.\n\n    Dropdown.withPlaceholder \"Choose a book\"\n        someDropdown\n\n","type":"String.String -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withItemToPrompt","comment":" Changes the way prompt is formatted.\n\n    Dropdown.withItemToPrompt (.name >> String.toUpper)\n        someDropdown\n\n","type":"(item -> String.String) -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withItemToText","comment":" Changes the way elements are formatted.\n\n    Dropdown.withItemToText .name\n        someDropdown\n\n","type":"(item -> String.String) -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withItems","comment":" Changes the component's list of elements.\n\n    Dropdown.withItems\n        [ { id = 0, name = \"Entry A\" }\n        , { id = 1, name = \"Entry B\" }\n        ]\n        someDropdown\n\n","type":"List.List item -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withListAlignedRight","comment":" Sets the alignment of dropdown list in case its width differs from prompt.\n\n    Dropdown.withListAlignedRight True\n        someDropdown\n\n","type":"Basics.Bool -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withListWidth","comment":" Set the width of list dropdown, in case it needs to have a different width\nthen the prompt.\n\n    Dropdown.withListWidth 200\n        someDropdown\n\n","type":"Basics.Int -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withMaximumListHeight","comment":" Changes the maximum height of the dropdown list.\n\n    Dropdown.withMaximumListHeight 200\n        someDropdown\n\n","type":"Basics.Int -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withPlaceholder","comment":" Changes the component's placeholder text.\n\n    Dropdown.withPlaceholder \"Choose a book\"\n        someDropdown\n\n","type":"String.String -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"},{"name":"withSelected","comment":" Marks the element as selected.\n\n    Dropdown.withSelected (List.head model.entries)\n        someDropdown\n\n","type":"Maybe.Maybe item -> UI.Dropdown.Dropdown item msg -> UI.Dropdown.Dropdown item msg"}],"binops":[]},{"name":"UI.Effects","comment":" `UI.Effect` is a combination of every command required for `paack-ui` to work correctly.\nThe data describing each side-effect is publicly available, performing the side-effects is left to the user.\n\nCan be used along with [`elm-program-test`](https://elm-program-test.netlify.app/cmds.html#defining-an-effect-type) to test your application flow.\n\nThis module parallels [elm/core's `Platform.Cmd` module](https://package.elm-lang.org/packages/elm/core/1.0.5/Platform-Cmd),\nbut with some additional helpers for creating `Effect` values.\n\nNote: If you don't know about commands yet, do not worry if this seems confusing at first,\ncommands will make more sense if you go through the Elm Architecture Tutorial first to see how\nthey fit in real applications.\n\n\n# Create\n\n@docs Effects, SideEffect, none, batch, msgToCmd, analytics, domFocus\n\n\n# Transform\n\n@docs map, perform\n\n","unions":[{"name":"SideEffect","comment":" The `SideEffect msg` type is used for describing commands for later inspection.\n","args":["msg"],"cases":[["MsgToCmd",["msg"]],["DomFocus",["Result.Result Browser.Dom.Error () -> msg","String.String"]],["Analytics",["UI.Analytics.Analytics"]]]}],"aliases":[{"name":"Effects","comment":" A list of side-effects to be performed later.\n","args":["msg"],"type":"List.List (UI.Effects.SideEffect msg)"}],"values":[{"name":"analytics","comment":" The effect of returning `Analytics`.\n","type":"UI.Analytics.Analytics -> UI.Effects.Effects msg"},{"name":"batch","comment":" Batch effects together. Parallels `Cmd.batch`.\n","type":"List.List (UI.Effects.Effects msg) -> UI.Effects.Effects msg"},{"name":"domFocus","comment":" The dom focus effect constructor.\n","type":"(Result.Result Browser.Dom.Error () -> msg) -> String.String -> UI.Effects.Effects msg"},{"name":"map","comment":" Transform the messages produced by a effect. Parallels `Cmd.map`.\n","type":"(a -> b) -> UI.Effects.Effects a -> UI.Effects.Effects b"},{"name":"msgToCmd","comment":" The effect of returning a `msg`.\n","type":"msg -> UI.Effects.Effects msg"},{"name":"none","comment":" Tells the `perform` function that there are no side-effects. Parallels `Cmd.none`.\n","type":"UI.Effects.Effects msg"},{"name":"perform","comment":" Perform a minimal interpretation of side-effects into commands.\nUse this if you don't care to change how to interpret them.\n","type":"UI.Effects.Effects msg -> Platform.Cmd.Cmd msg"}],"binops":[]},{"name":"UI.Filter","comment":" The `UI.Filter` is a reusable dialog, hidden in a button, used for filtering the results of a list.\n\n\n# Common\n\n@docs Filter\n\n\n## Size\n\n@docs FilterSize, withSize, sizeMedium, sizeExtraSmall, withWidth, withAlignRight\n\n\n## Rendering\n\n@docs renderElement\n\n\n# Pre-defined filters\n\nThere are the predefined filters, which have states and updates, and includes sorting buttons.\n\n    model =\n        { someFilter =\n            Filter.singleTextFilter Nothing .artist\n                |> Filter.setItems [ example1, example2 ]\n        , isFilterOpen = False\n        }\n\n    type Msg\n        = FilterOpen\n        | FilterClose\n        | FilterEdit Filter.FilterMsg\n\n    view renderConfig model =\n        Filter.fromModel label\n            Msg.FilterEdit\n            model.someFilter\n            |> Filter.renderElement renderConfig\n\n\n## Builders\n\n@docs FilterModel, fromModel\n@docs singleTextFilter, multiTextFilter, singleDateFilter, rangeDateFilter, periodDateFilter, radioFilter\n@docs FilterMsg, update\n@docs setItems, getItems\n\n\n### Sorting\n\n    filterSorting model =\n        Filter.sorting\n            { sortAscendingMsg = Sort True\n            , sortDescendingMsg = Sort False\n            , clearSortingMsg = ClearSorting\n            }\n            |> Filter.withAppliedSorting Filter.sortingAscending\n            |> Filter.withSortingPreview \"A\" \"Z\"\n\n@docs FilterSorting, withSorting, sorting, withSortingPreview\n@docs FilterAppliedSorting, withAppliedSorting, sortingAscending, sortingDescending, notSorting\n\n\n# Custom filters\n\nThere is also the possibility to create a custom filter, where you set the sorting, the filter fields/body, and the avaiable buttons.\n\n    model =\n        { etc | isFilterOpen = False }\n\n    type Msg\n        = Sort Bool\n        | ClearSorting\n        | Etc -- ...\n\n    view renderConfig model =\n        Filter.customFilter label\n            { openMsg = openMsg, closeMsg = closeMsg, isOpen = model.isFilterOpen }\n            |> Filter.withSorting (filterSorting model)\n            |> Filter.withBody (filterBody renderConfig model)\n            |> Filter.withButtons (filterButtons renderConfig model)\n            |> Filter.withAppliedHeader clearMsg labelWhenApplied\n            |> Filter.renderElement renderConfig\n\n\n## Builder\n\n@docs customFilter\n\n\n## Customizer\n\n@docs withBody, withButtons, withBodyHeight, withCalendarBody\n\n\n## Header when filter applied\n\n@docs FilterAppliedHeader, withAppliedHeader, appliedHeader\n\n","unions":[{"name":"Filter","comment":" Holds the filter's visual element information.\n","args":["msg"],"cases":[]},{"name":"FilterAppliedHeader","comment":" Describes the applied filter state.\n","args":["msg"],"cases":[]},{"name":"FilterAppliedSorting","comment":" Describes the applied sorting state.\n","args":[],"cases":[]},{"name":"FilterModel","comment":" Holds a pre-defined filter's current state.\n","args":["msg","item"],"cases":[]},{"name":"FilterMsg","comment":" Contains a pre-defined filter's change.\n","args":[],"cases":[]},{"name":"FilterSize","comment":" Describes a compatible size.\n","args":[],"cases":[]},{"name":"FilterSorting","comment":" Describes the filter's sorting information.\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"appliedHeader","comment":" Sets a preview of how many items (or which ones) were selected for filtering, with a button to fastly clear the filtering.\n","type":"String.String -> msg -> UI.Filter.FilterAppliedHeader msg"},{"name":"customFilter","comment":" Builds a custom filter, where you create the messages and treat the states.\n","type":"String.String -> { openMsg : msg, closeMsg : msg, isOpen : Basics.Bool } -> UI.Filter.Filter msg"},{"name":"fromModel","comment":" Creates the visual component from the model of a pre-built filter.\n\n    fromModel\n        label\n        Msg.ForFilter\n        model.someFilter\n\n","type":"String.String -> (UI.Filter.FilterMsg -> msg) -> UI.Filter.FilterModel msg item -> UI.Filter.Filter msg"},{"name":"getItems","comment":" Retrieve items, sorted and filtered.\n","type":"UI.Filter.FilterModel msg item -> List.List item"},{"name":"multiTextFilter","comment":" A pre-built filter, with multiple text fields.\n\n    multiTextField [] .someStringField\n\n","type":"List.List String.String -> (item -> String.String) -> UI.Filter.FilterModel msg item"},{"name":"notSorting","comment":" For when not sorting.\n","type":"UI.Filter.FilterAppliedSorting"},{"name":"periodDateFilter","comment":" A pre-built filter, for a period (before, on, or after) some date.\n\n    periodDateFilter \"some-dom-id\"\n        timeZone\n        (Just model.someInitialBeginningTime)\n        (Just GT)\n        .someTimeField\n\n","type":"String.String -> Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe Basics.Order -> (item -> Time.Posix) -> UI.Filter.FilterModel msg item"},{"name":"radioFilter","comment":" A pre-built filter, for a custom radio group.\n\n    radioFilter \"some-dom-id\"\n        [ \"Orange\", \"Strawberry\", \"Pineapple\", \"Watermelon\" ]\n        (Just 0)\n        (\\fruit selected -> fruitsIndex fruit == selected)\n\n","type":"String.String -> List.List String.String -> Maybe.Maybe Basics.Int -> (item -> Basics.Int -> Basics.Bool) -> UI.Filter.FilterModel msg item"},{"name":"rangeDateFilter","comment":" A pre-built filter, for a range of date.\n\n    rangeDateFilter timeZone\n        (Just model.someInitialBeginningTime)\n        (Just model.someInitialEndingTime)\n        .someTimeField\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> Maybe.Maybe Time.Posix -> (item -> Time.Posix) -> UI.Filter.FilterModel msg item"},{"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.Filter.Filter msg -> Element.Element msg"},{"name":"setItems","comment":" Feed the filter with items.\n","type":"List.List item -> UI.Filter.FilterModel msg item -> UI.Filter.FilterModel msg item"},{"name":"singleDateFilter","comment":" A pre-built filter, for a single date.\n\n    singleDateFilter timeZone (Just model.someInitialTime) .someTimeField\n\n","type":"Time.Zone -> Maybe.Maybe Time.Posix -> (item -> Time.Posix) -> UI.Filter.FilterModel msg item"},{"name":"singleTextFilter","comment":" A pre-built, single text field filter.\n\n    singleTextField (Just \"initial filtering value\") .someStringField\n\n","type":"Maybe.Maybe String.String -> (item -> String.String) -> UI.Filter.FilterModel msg item"},{"name":"sizeExtraSmall","comment":" Smallest size.\n","type":"UI.Filter.FilterSize"},{"name":"sizeMedium","comment":" Default size.\n","type":"UI.Filter.FilterSize"},{"name":"sorting","comment":" Builds a [`FilterSorting`](#FilterSorting) for custom sorting.\n","type":"{ sortAscendingMsg : msg, sortDescendingMsg : msg, clearSortingMsg : msg } -> UI.Filter.FilterSorting msg"},{"name":"sortingAscending","comment":" For when the current sorting is ascending.\n","type":"UI.Filter.FilterAppliedSorting"},{"name":"sortingDescending","comment":" For when the current sorting is descending.\n","type":"UI.Filter.FilterAppliedSorting"},{"name":"update","comment":" A classic update function.\n","type":"(UI.Filter.FilterMsg -> msg) -> UI.Filter.FilterMsg -> UI.Filter.FilterModel msg item -> ( UI.Filter.FilterModel msg item, UI.Effects.Effects msg )"},{"name":"withAlignRight","comment":" Aligns the filter to the right.\n","type":"UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withAppliedHeader","comment":" Sets the closed filter visually different when with filtering applied.\n","type":"Maybe.Maybe (UI.Filter.FilterAppliedHeader msg) -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withAppliedSorting","comment":" Sets the current sorting state.\n","type":"UI.Filter.FilterAppliedSorting -> UI.Filter.FilterSorting msg -> UI.Filter.FilterSorting msg"},{"name":"withBody","comment":" Sets the content of the filter's dialog when open.\n","type":"List.List (Element.Element msg) -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withBodyHeight","comment":" Limits the vertical size of the filter's body\n","type":"Basics.Int -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withButtons","comment":" Sets the buttons at the bottom of the filter's dialog when open.\n","type":"List.List (UI.Button.Button msg) -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withCalendarBody","comment":" Sets the content of the filter's dialog as a date-picker.\n","type":"UI.DatePicker.DatePicker msg -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withSize","comment":" Scale the component between [the compatible sizes](#FilterSize).\n","type":"UI.Filter.FilterSize -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withSorting","comment":" Adds sorting buttons to the filter.\n","type":"UI.Filter.FilterSorting msg -> UI.Filter.Filter msg -> UI.Filter.Filter msg"},{"name":"withSortingPreview","comment":" Add example of the sorting order to the sorting buttons.\n","type":"{ smaller : String.String, larger : String.String } -> UI.Filter.FilterSorting msg -> UI.Filter.FilterSorting msg"},{"name":"withWidth","comment":" Sets the width with Element.\n","type":"Element.Length -> UI.Filter.Filter msg -> UI.Filter.Filter msg"}],"binops":[]},{"name":"UI.Icon","comment":" `UI.Icon` is an implementation of icons using an SVG-spritesheet.\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\n**NOTE**: The spritesheet is automatically injected when using [`UI.Document.toBrowserDocument`](UI-Document#toBrowserDocument)\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\n\n\n## Current names\n\n@docs addCircle, add, arrowCurveLeft, arrowDown, arrowDownBold, arrowLeft, arrowRight, arrowShapeUp, arrowUp, arrowUpBoldNegative, bell, bicycle, bike, bluetooth, boltDisabled, bolt, boxFilled, boxOutlined, boxesFilled, boxesOutlined, calendar, camera, car, cellular, checkmarkCircle, checkmarkRoundedRectangle, checkmark, chevronDown, chevronLeft, chevronRight, chevronUp, circle, clockIssue, clockLocked, clock, closeCircle, closeRoundedRectangle, close, coins, collapse, crosshair, currencyNote, directions, download, eBike, eCar, eVan, edit, ellipsis, emailFill, emailOutline, empty, expand, eyeHide, eye, filter, firstPage, fix, flag, folder, food, frozen, gVan, grocery, groups, hamburger, hand, home, hourglass, info, keys, lastPage, legacyApis, legacyHistorical, legacyLabelPrinter, legacyReport, legacyRetailerDashboard, legacySignOut, list, location, lock, logout, map, mapPinRadius, mapPin, messageLock, messageOTP, message, microphoneMute, microphone, minus, move, notepad, notes, notification, otp, personAssign, personAssigned, personError, personRemove, personUnassign, person, personsAdd, personsNotApplicable, persons, phoneEndCall, phoneStartCall, placeholder, printerError, printer, redo, reload, remove, report, reporting, reset, return, scanBarcode, scanGroup, scanPackage, scanSpace, scan, search, settings, shelves, sort, spaceError, spaceSearch, space, speakerMute, speaker, store, tag, trash, truck, undo, van, walk, warning, waves, webhook\n\n\n## Special\n\n@docs fixing, loader\n\n\n## Old (depreacted) names\n\n@docs assignPerson, boxes, check, configure, delete, done, eventLog, fixIssues, insert, moreActions, nextContent, notifications, paackSpaces, packages, phone, pause, previousContent, print, sandwichMenu, searchSpace, seeMore, sortDecreasing, sortIncreasing, success, toggle, toggleDown, toggleUp, unassignPerson, wait\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":" Icon constructor.\n\n    Icon.add \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"addCircle","comment":" Icon constructor.\n\n    Icon.addCircle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowCurveLeft","comment":" Icon constructor.\n\n    Icon.arrowCurveLeft \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowDown","comment":" Icon constructor.\n\n    Icon.arrowDown \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowDownBold","comment":" Icon constructor.\n\n    Icon.arrowDownBold \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowLeft","comment":" Icon constructor.\n\n    Icon.arrowLeft \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowRight","comment":" Icon constructor.\n\n    Icon.arrowRight \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowShapeUp","comment":" Icon constructor.\n\n    Icon.arrowShapeUp \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowUp","comment":" Icon constructor.\n\n    Icon.arrowUp \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"arrowUpBoldNegative","comment":" Icon constructor.\n\n    Icon.arrowUpBoldNegative \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"assignPerson","comment":" A person with a plus sign on the bottom-right.\n\n    Icon.assingPerson \"Select Manager\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"bell","comment":" Icon constructor.\n\n    Icon.bell \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"bicycle","comment":" Icon constructor.\n\n    Icon.bicycle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"bike","comment":" Icon constructor.\n\n    Icon.bike \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"bluetooth","comment":" Icon constructor.\n\n    Icon.bluetooth \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"bolt","comment":" Icon constructor.\n\n    Icon.bolt \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boltDisabled","comment":" Icon constructor.\n\n    Icon.boltDisabled \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boxFilled","comment":" Icon constructor.\n\n    Icon.boxFilled \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boxOutlined","comment":" Icon constructor.\n\n    Icon.boxOutlined \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boxes","comment":" Piled up boxes.\n\n    Icon.boxes \"Stacked boxed\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boxesFilled","comment":" Icon constructor.\n\n    Icon.boxesFilled \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"boxesOutlined","comment":" Icon constructor.\n\n    Icon.boxesOutlined \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"calendar","comment":" Icon constructor.\n\n    Icon.calendar \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"camera","comment":" Icon constructor.\n\n    Icon.camera \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"car","comment":" Icon constructor.\n\n    Icon.car \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"cellular","comment":" Icon constructor.\n\n    Icon.cellular \"Accessibility hint\"\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 \"Notepad\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"checkmark","comment":" Icon constructor.\n\n    Icon.checkmark \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"checkmarkCircle","comment":" Icon constructor.\n\n    Icon.checkmarkCircle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"checkmarkRoundedRectangle","comment":" Icon constructor.\n\n    Icon.checkmarkRoundedRectangle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"chevronDown","comment":" Icon constructor.\n\n    Icon.chevronDown \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"chevronLeft","comment":" Icon constructor.\n\n    Icon.chevronLeft \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"chevronRight","comment":" Icon constructor.\n\n    Icon.chevronRight \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"chevronUp","comment":" Icon constructor.\n\n    Icon.chevronUp \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"circle","comment":" Icon constructor.\n\n    Icon.circle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"clock","comment":" Icon constructor.\n\n    Icon.clock \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"clockIssue","comment":" Icon constructor.\n\n    Icon.clockIssue \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"clockLocked","comment":" Icon constructor.\n\n    Icon.clockLocked \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"close","comment":" Icon constructor.\n\n    Icon.close \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"closeCircle","comment":" Icon constructor.\n\n    Icon.closeCircle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"closeRoundedRectangle","comment":" Icon constructor.\n\n    Icon.closeRoundedRectangle \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"coins","comment":" Icon constructor.\n\n    Icon.coins \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"collapse","comment":" Icon constructor.\n\n    Icon.collapse \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"configure","comment":" A gear. Usually used for opening settings managers.\n\n    Icon.configure \"Open display settings\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"crosshair","comment":" Icon constructor.\n\n    Icon.crosshair \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"currencyNote","comment":" Icon constructor.\n\n    Icon.currencyNote \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"delete","comment":" A trash can with an \"x\" on it.\n\n    Icon.delete \"Trash item\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"directions","comment":" Icon constructor.\n\n    Icon.directions \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"done","comment":" A notepad with a checkmark.\n\n    Icon.done \"Mark all as done.\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"download","comment":" Icon constructor.\n\n    Icon.download \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eBike","comment":" Icon constructor.\n\n    Icon.eBike \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eCar","comment":" Icon constructor.\n\n    Icon.eCar \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eVan","comment":" Icon constructor.\n\n    Icon.eVan \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"edit","comment":" Icon constructor.\n\n    Icon.edit \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"ellipsis","comment":" Icon constructor.\n\n    Icon.ellipsis \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"emailFill","comment":" Icon constructor.\n\n    Icon.emailFill \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"emailOutline","comment":" Icon constructor.\n\n    Icon.emailOutline \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"empty","comment":" Icon constructor.\n\n    Icon.empty \"Accessibility hint\"\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**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"expand","comment":" Icon constructor.\n\n    Icon.expand \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eye","comment":" Icon constructor.\n\n    Icon.eye \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"eyeHide","comment":" Icon constructor.\n\n    Icon.eyeHide \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"filter","comment":" Icon constructor.\n\n    Icon.filter \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"firstPage","comment":" Icon constructor.\n\n    Icon.firstPage \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"fix","comment":" Icon constructor.\n\n    Icon.fix \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"fixIssues","comment":" A thunder bolt.\n\n    Icon.fixIssues \"Fix issues from selected groups\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"fixing","comment":" A monkey wrench with a red ball.\n\n    Icon.fixing \"Fix something\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"flag","comment":" Icon constructor.\n\n    Icon.flag \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"folder","comment":" Icon constructor.\n\n    Icon.folder \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"food","comment":" Icon constructor.\n\n    Icon.food \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"frozen","comment":" Icon constructor.\n\n    Icon.frozen \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"gVan","comment":" Icon constructor.\n\n    Icon.gVan \"Accessibility hint\"\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":"grocery","comment":" Icon constructor.\n\n    Icon.grocery \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"groups","comment":" Icon constructor.\n\n    Icon.groups \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"hamburger","comment":" Icon constructor.\n\n    Icon.hamburger \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"hand","comment":" Icon constructor.\n\n    Icon.hand \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"home","comment":" Icon constructor.\n\n    Icon.home \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"hourglass","comment":" Icon constructor.\n\n    Icon.hourglass \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"info","comment":" Icon constructor.\n\n    Icon.info \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"insert","comment":" A plus sign within a circle.\n\n    Icon.insert \"Insert row\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"keys","comment":" Icon constructor.\n\n    Icon.keys \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"lastPage","comment":" Icon constructor.\n\n    Icon.lastPage \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacyApis","comment":" Icon constructor.\n\n    Icon.legacyApis \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacyHistorical","comment":" Icon constructor.\n\n    Icon.legacyHistorical \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacyLabelPrinter","comment":" Icon constructor.\n\n    Icon.legacyLabelPrinter \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacyReport","comment":" Icon constructor.\n\n    Icon.legacyReport \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacyRetailerDashboard","comment":" Icon constructor.\n\n    Icon.legacyRetailerDashboard \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"legacySignOut","comment":" Icon constructor.\n\n    Icon.legacySignOut \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"list","comment":" Icon constructor.\n\n    Icon.list \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"loader","comment":" A loading spinner.\n\n    Icon.loader \"You spin me right 'round\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"location","comment":" Icon constructor.\n\n    Icon.location \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"lock","comment":" Icon constructor.\n\n    Icon.lock \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"logout","comment":" Icon constructor.\n\n    Icon.logout \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"map","comment":" Icon constructor.\n\n    Icon.map \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"mapPin","comment":" Icon constructor.\n\n    Icon.mapPin \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"mapPinRadius","comment":" Icon constructor.\n\n    Icon.mapPinRadius \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"message","comment":" Icon constructor.\n\n    Icon.message \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"messageLock","comment":" Icon constructor.\n\n    Icon.messageLock \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"messageOTP","comment":" Icon constructor.\n\n    Icon.messageOTP \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"microphone","comment":" Icon constructor.\n\n    Icon.microphone \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"microphoneMute","comment":" Icon constructor.\n\n    Icon.microphoneMute \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"minus","comment":" Icon constructor.\n\n    Icon.minus \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"moreActions","comment":" Three-dot in series horizontally.\nIt's usually used in the web to access less commonly used actions.\n\n    Icon.moreActions \"More actions\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"move","comment":" Icon constructor.\n\n    Icon.move \"Accessibility hint\"\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**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"notepad","comment":" Icon constructor.\n\n    Icon.notepad \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"notes","comment":" Icon constructor.\n\n    Icon.notes \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"notification","comment":" Icon constructor.\n\n    Icon.notification \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"notifications","comment":" A bell for indicating notifications.\n\n    Icon.notifications \"See notifications\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"otp","comment":" Icon constructor.\n\n    Icon.otp \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"paackSpaces","comment":" Internal jargon in Paack.\n\n    Icon.paackSpaces \"Spaces\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"packages","comment":" \"Box-Outlined\".\n\n    Icon.packages \"Order's packages\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"pause","comment":" The hand from the stop sign.\n\n    Icon.pause \"Paused orders\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"person","comment":" Icon constructor.\n\n    Icon.person \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personAssign","comment":" Icon constructor.\n\n    Icon.personAssign \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personAssigned","comment":" Icon constructor.\n\n    Icon.personAssigned \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personError","comment":" Icon constructor.\n\n    Icon.personError \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personRemove","comment":" Icon constructor.\n\n    Icon.personRemove \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personUnassign","comment":" Icon constructor.\n\n    Icon.personUnassign \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"persons","comment":" Icon constructor.\n\n    Icon.persons \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personsAdd","comment":" Icon constructor.\n\n    Icon.personsAdd \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"personsNotApplicable","comment":" Icon constructor.\n\n    Icon.personsNotApplicable \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"phone","comment":" A phone.\n\n    Icon.phone \"Call\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"phoneEndCall","comment":" Icon constructor.\n\n    Icon.phoneEndCall \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"phoneStartCall","comment":" Icon constructor.\n\n    Icon.phoneStartCall \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"placeholder","comment":" Icon constructor.\n\n    Icon.placeholder \"Accessibility hint\"\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**NOTE**: Deprecated name.\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 \"Printer pacakage's barcode\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"printer","comment":" Icon constructor.\n\n    Icon.printer \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"printerError","comment":" Icon constructor.\n\n    Icon.printerError \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"redo","comment":" Icon constructor.\n\n    Icon.redo \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"reload","comment":" Icon constructor.\n\n    Icon.reload \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"remove","comment":" Icon constructor.\n\n    Icon.remove \"Accessibility hint\"\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":"report","comment":" Icon constructor.\n\n    Icon.report \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"reporting","comment":" Icon constructor.\n\n    Icon.reporting \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"reset","comment":" Icon constructor.\n\n    Icon.reset \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"return","comment":" Icon constructor.\n\n    Icon.return \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"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**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"scan","comment":" Icon constructor.\n\n    Icon.scan \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"scanBarcode","comment":" Icon constructor.\n\n    Icon.scanBarcode \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"scanGroup","comment":" Icon constructor.\n\n    Icon.scanGroup \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"scanPackage","comment":" Icon constructor.\n\n    Icon.scanPackage \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"scanSpace","comment":" Icon constructor.\n\n    Icon.scanSpace \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"search","comment":" Icon constructor.\n\n    Icon.search \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"searchSpace","comment":" The space icon with a search icon in the right-bottom.\n\n    Icon.searchSpace \"Search Space\"\n\n**NOTE**: Deprecated name.\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**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"settings","comment":" Icon constructor.\n\n    Icon.settings \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"shelves","comment":" Icon constructor.\n\n    Icon.shelves \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"sort","comment":" Icon constructor.\n\n    Icon.sort \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"sortDecreasing","comment":" An arrow pointing up.\n\n    Icon.sortDecreasing \"Sort from Z to A\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"sortIncreasing","comment":" An arrow pointing down.\n\n    Icon.sortIncreasing \"Sort from A to Z\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"space","comment":" Icon constructor.\n\n    Icon.space \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"spaceError","comment":" Icon constructor.\n\n    Icon.spaceError \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"spaceSearch","comment":" Icon constructor.\n\n    Icon.spaceSearch \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"speaker","comment":" Icon constructor.\n\n    Icon.speaker \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"speakerMute","comment":" Icon constructor.\n\n    Icon.speakerMute \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"store","comment":" Icon constructor.\n\n    Icon.store \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"success","comment":" A check mark in circle, commonly used to indicate a success state.\n\n    Icon.success \"Success\"\n\n**NOTE**: Deprecated name.\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.Document`][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-Document\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.Document`][nav]!\n\n","type":"Html.Html msg"},{"name":"tag","comment":" Icon constructor.\n\n    Icon.tag \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"toggle","comment":" A foldable paper, toggle some content between showing/hiding, or full/collapsed.\n\n    Icon.toggle \"Expand technical details\"\n\n**NOTE**: Deprecated name.\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**NOTE**: Deprecated name.\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**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"trash","comment":" Icon constructor.\n\n    Icon.trash \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"truck","comment":" Icon constructor.\n\n    Icon.truck \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"unassignPerson","comment":" A person with a plus sign on the bottom-right.\n\n    Icon.assingPerson \"Select Manager\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"undo","comment":" Icon constructor.\n\n    Icon.undo \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"van","comment":" Icon constructor.\n\n    Icon.van \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"wait","comment":" An hourglass.\n\n    Icon.wait \"On hold\"\n\n**NOTE**: Deprecated name.\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"walk","comment":" Icon constructor.\n\n    Icon.walk \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"warning","comment":" Icon constructor.\n\n    Icon.warning \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"waves","comment":" Icon constructor.\n\n    Icon.waves \"Accessibility hint\"\n\n","type":"String.String -> UI.Icon.Icon"},{"name":"webhook","comment":" Icon constructor.\n\n    Icon.webhook \"Accessibility hint\"\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.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.Menu","comment":" The `UI.Menu` is a component for rendering dropdown menus.\n\nFollowing Elm-UI standards, this component is accessible.\n\nA menu can be created and rendered as in the following pipeline:\n\n    Button.cmd ToggleMenu Button.primary\n        |> Menu.menu ToggleMenu\n            [ Menu.item Download\n                (Just Icon.download)\n                \"Download\"\n            ]\n        |> Menu.renderElement renderConfig\n\n\n# Building\n\n@docs Menu, menu\n@docs MenuItem, item\n\n\n# Style\n\n@docs OpenDirection, openAbove, openBelow\n@docs itemWithDangerTone, withOpenDirection\n\n\n# Interactive\n\n@docs setVisible\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Menu","comment":" The `Menu msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]},{"name":"MenuItem","comment":" The `MenuItem` is required when assembling the list of menu entries.\n","args":["msg"],"cases":[]},{"name":"OpenDirection","comment":" The `OpenDirection` is used to determine the direction that the menu will open.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"item","comment":" Constructs a `MenuItem`.\n\n    Button.cmd ToggleMenu Button.primary\n        |> Menu.menu ToggleMenu\n            [ Menu.item Download\n                (Just Icon.download)\n                \"Download\"\n            ]\n        |> Menu.renderElement renderConfig\n\n","type":"msg -> Maybe.Maybe (String.String -> UI.Icon.Icon) -> String.String -> UI.Menu.MenuItem msg"},{"name":"itemWithDangerTone","comment":" Sets the color of a `MenuItem`.\n\n    Button.cmd ToggleMenu Button.primary\n        |> Menu.menu ToggleMenu\n            [ \"Delete\"\n                |> Menu.item Delete (Just Icon.delete)\n                |> Menu.itemWithDangerTone\n            ]\n        |> Menu.renderElement renderConfig\n\n","type":"UI.Menu.MenuItem msg -> UI.Menu.MenuItem msg"},{"name":"menu","comment":" Defines all the required properties for creating a dropdown menu.\n\n    Button.cmd ToggleMenu Button.primary\n        |> Menu.menu ToggleMenu\n            [ \"Download\"\n                |> Menu.item Download Icon.download\n            , \"Delete\"\n                |> Menu.item Delete Icon.delete\n                |> Menu.itemWithDangerTone\n            ]\n        |> Menu.renderElement renderConfig\n\n","type":"msg -> List.List (UI.Menu.MenuItem msg) -> UI.Button.Button msg -> UI.Menu.Menu msg"},{"name":"openAbove","comment":" Renders the menu above the button, mostly used on menus that appear on the bottom of the screen.\n","type":"UI.Menu.OpenDirection"},{"name":"openBelow","comment":" Renders the menu bellow the button, this is the default menu direction.\n","type":"UI.Menu.OpenDirection"},{"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.Menu.Menu msg -> Element.Element msg"},{"name":"setVisible","comment":" Show or hide the menu overlay.\n\n    Menu.setVisible True someMenu\n\n","type":"Basics.Bool -> UI.Menu.Menu msg -> UI.Menu.Menu msg"},{"name":"withOpenDirection","comment":" Sets menu direction.\n\n    Menu.withOpenDirection Menu.above someMenu\n\n","type":"UI.Menu.OpenDirection -> UI.Menu.Menu msg -> UI.Menu.Menu 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            { onForwardClicked = Msg.NextPage\n            , onPreviousClicked = Msg.PreviousPage\n            , totalAmount = List.length model.options\n            , pageAmount = model.pageOffset\n            }\n            |> Paginator.withCurrentItem model.current\n            |> Paginator.renderElement renderConfig\n        ]\n\n\n# Building\n\n@docs Paginator, nonNumeric\n\n\n# Options\n\n@docs withCurrentItem, withCurrentPage\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Paginator","comment":" The `Paginator msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"nonNumeric","comment":" This paginator style has a label, followed by the previous and next buttons.\n\nThe label looks like: {{current + 1}} - {{min (pageAmount + current) max)}} of {{max}}\n\n    Paginator.nonNumeric\n        { onForwardClicked = Msg.Forward\n        , onPreviousClicked = Msg.Previous\n        , totalAmount = 999\n        , pageAmount = 10\n        }\n        renderConfig\n\n","type":"{ onForwardClicked : msg, onPreviousClicked : msg, totalAmount : Basics.Int, pageAmount : Basics.Int } -> UI.Paginator.Paginator 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.Paginator.Paginator msg -> Element.Element msg"},{"name":"withCurrentItem","comment":" The current item, most probably the first one displayed in your list.\n\n    Paginator.withCurrentItem 11 somePaginator\n\n","type":"Basics.Int -> UI.Paginator.Paginator msg -> UI.Paginator.Paginator msg"},{"name":"withCurrentPage","comment":" The current page. Similar to [`withCurrentItem`](#withCurrentItem), but considering `pageAmount`.\n\n    Paginator.withCurrentPage 2 somePaginator\n\n","type":"Basics.Int -> UI.Paginator.Paginator msg -> UI.Paginator.Paginator msg"}],"binops":[]},{"name":"UI.Palette","comment":" `UI.Palette` is an interface offering all colors variations proposed in the design system.\n\n    Palette.blue600\n        |> Palette.toElementColor\n\n\n# Which color\n\n@docs blue, gray, green, red, yellow\n@docs blue100, blue200, blue300, blue400, blue500, blue600, blue700, blue800\n@docs gray100, gray200, gray300, gray400, gray500, gray600, gray700, gray800\n@docs green800, red100, red200, red300, red400, red500, red600, red700, green100, green200, green300, green400, green500, green600, green700, red800, yellow100, yellow200, yellow300, yellow400, yellow500, yellow600, yellow700, yellow800\n\n\n# Which hue\n\n@docs Hue, hueBlue, hueGray, hueGreen, hueRed, hueYellow\n\n\n# Which shade\n\n@docs Shade, shade100, shade200, shade300, shade400, shade500, shade600, shade700, shade800\n\n\n# Building\n\n@docs Color, color, toBackgroundColor, toFontColor, toBorderColor\n\n\n# Generic colors\n\n@docs genericBlack, genericWhite, genericSkyBlue\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":"Color","comment":" `Palette.Color` holds data about some desired color.\n","args":[],"cases":[]},{"name":"Hue","comment":" The design system describes four main entries that here are called Hues.\n\nA hue is one of the five pure colors of the palette.\n\n","args":[],"cases":[]},{"name":"Shade","comment":" Each [hue](UI-Palette#Hue) can be paired with eight different shades.\n\nThe shades are 800, 700, 600, 500, 400, 300, 200 and 100.\n\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"blue","comment":" Shorthand for the most common occurrence of blue. Equivalent to blue700\n","type":"UI.Palette.Color"},{"name":"blue100","comment":" ","type":"UI.Palette.Color"},{"name":"blue200","comment":" ","type":"UI.Palette.Color"},{"name":"blue300","comment":" ","type":"UI.Palette.Color"},{"name":"blue400","comment":" ","type":"UI.Palette.Color"},{"name":"blue500","comment":" ","type":"UI.Palette.Color"},{"name":"blue600","comment":" ","type":"UI.Palette.Color"},{"name":"blue700","comment":" ","type":"UI.Palette.Color"},{"name":"blue800","comment":" ","type":"UI.Palette.Color"},{"name":"color","comment":" Given a hue and shade it constructs a color.\n\n    Palette.color hueBlue shade600\n\n","type":"UI.Palette.Hue -> UI.Palette.Shade -> UI.Palette.Color"},{"name":"genericBlack","comment":" Black as in `#000`.\n\n    Palette.genericBlack\n\n","type":"UI.Palette.Color"},{"name":"genericSkyBlue","comment":" That blue used in our visual identity.\n\n    Palette.genericSkyBlue\n\n","type":"UI.Palette.Color"},{"name":"genericWhite","comment":" White as in `#FFF`.\n\n    Palette.genericWhite\n\n","type":"UI.Palette.Color"},{"name":"gray","comment":" Shorthand for the most common occurrence of gray. Equivalent to gray700\n","type":"UI.Palette.Color"},{"name":"gray100","comment":" ","type":"UI.Palette.Color"},{"name":"gray200","comment":" ","type":"UI.Palette.Color"},{"name":"gray300","comment":" ","type":"UI.Palette.Color"},{"name":"gray400","comment":" ","type":"UI.Palette.Color"},{"name":"gray500","comment":" ","type":"UI.Palette.Color"},{"name":"gray600","comment":" ","type":"UI.Palette.Color"},{"name":"gray700","comment":" ","type":"UI.Palette.Color"},{"name":"gray800","comment":" ","type":"UI.Palette.Color"},{"name":"green","comment":" Shorthand for the most common occurrence of green. Equivalent to green500\n","type":"UI.Palette.Color"},{"name":"green100","comment":" ","type":"UI.Palette.Color"},{"name":"green200","comment":" ","type":"UI.Palette.Color"},{"name":"green300","comment":" ","type":"UI.Palette.Color"},{"name":"green400","comment":" ","type":"UI.Palette.Color"},{"name":"green500","comment":" ","type":"UI.Palette.Color"},{"name":"green600","comment":" ","type":"UI.Palette.Color"},{"name":"green700","comment":" ","type":"UI.Palette.Color"},{"name":"green800","comment":" ","type":"UI.Palette.Color"},{"name":"hueBlue","comment":" ","type":"UI.Palette.Hue"},{"name":"hueGray","comment":" ","type":"UI.Palette.Hue"},{"name":"hueGreen","comment":" ","type":"UI.Palette.Hue"},{"name":"hueRed","comment":" ","type":"UI.Palette.Hue"},{"name":"hueYellow","comment":" ","type":"UI.Palette.Hue"},{"name":"red","comment":" Shorthand for the most common occurrence of red. Equivalent to red600\n","type":"UI.Palette.Color"},{"name":"red100","comment":" ","type":"UI.Palette.Color"},{"name":"red200","comment":" ","type":"UI.Palette.Color"},{"name":"red300","comment":" ","type":"UI.Palette.Color"},{"name":"red400","comment":" ","type":"UI.Palette.Color"},{"name":"red500","comment":" ","type":"UI.Palette.Color"},{"name":"red600","comment":" ","type":"UI.Palette.Color"},{"name":"red700","comment":" ","type":"UI.Palette.Color"},{"name":"red800","comment":" ","type":"UI.Palette.Color"},{"name":"shade100","comment":" ","type":"UI.Palette.Shade"},{"name":"shade200","comment":" ","type":"UI.Palette.Shade"},{"name":"shade300","comment":" ","type":"UI.Palette.Shade"},{"name":"shade400","comment":" ","type":"UI.Palette.Shade"},{"name":"shade500","comment":" ","type":"UI.Palette.Shade"},{"name":"shade600","comment":" ","type":"UI.Palette.Shade"},{"name":"shade700","comment":" ","type":"UI.Palette.Shade"},{"name":"shade800","comment":" ","type":"UI.Palette.Shade"},{"name":"toBackgroundColor","comment":" Shorthand for setting background colors\n\n    Element.row\n        [ Palette.blue600 |> Palette.toBackgroundColor\n        ]\n        []\n\n","type":"UI.Palette.Color -> Element.Attr decorative msg"},{"name":"toBorderColor","comment":" Shorthand for setting border colors\n\n    Element.row\n        [ Palette.blue600 |> Palette.toBorderColor\n        , Border.width 2\n        , Border.solid\n        ]\n        []\n\n","type":"UI.Palette.Color -> Element.Attr decorative msg"},{"name":"toCssColor","comment":" Transforms a [`Palette.Color`](UI-Palette#Color) into a CSS-compatible parameter.\n\n    Palette.blue700\n        |> Palette.toCssColor\n        |> Html.Attributes.style \"font-color\"\n\n","type":"UI.Palette.Color -> String.String"},{"name":"toElementColor","comment":" Manually transforms a [`Palette.Color`](UI-Palette#Color) into an Elm-UI-compatible color.\n\n    let\n        backgroundColor =\n            Palette.blue700\n    in\n    Element.el\n        [ backgroundColor\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":"toFontColor","comment":" Shorthand for setting font colors\n\n    Element.row\n        [ Palette.blue600 |> Palette.toFontColor\n        , Font.size 16\n        , Font.justify\n        ]\n        []\n\n","type":"UI.Palette.Color -> Element.Attr decorative msg"},{"name":"withAlpha","comment":" Applies an alpha value to the color adding transparency.\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"},{"name":"yellow","comment":" Shorthand for the most common occurrence of yellow. Equivalent to yellow500\n","type":"UI.Palette.Color"},{"name":"yellow100","comment":" ","type":"UI.Palette.Color"},{"name":"yellow200","comment":" ","type":"UI.Palette.Color"},{"name":"yellow300","comment":" ","type":"UI.Palette.Color"},{"name":"yellow400","comment":" ","type":"UI.Palette.Color"},{"name":"yellow500","comment":" ","type":"UI.Palette.Color"},{"name":"yellow600","comment":" ","type":"UI.Palette.Color"},{"name":"yellow700","comment":" ","type":"UI.Palette.Color"},{"name":"yellow800","comment":" ","type":"UI.Palette.Color"}],"binops":[]},{"name":"UI.Radio","comment":" Accessible and uniform-styled implementation of a radio buttons.\n\n    Radio.group\n        { label = \"Pick a favorite animal:\"\n        , onSelectMsg = Msg.SelectRadio\n        , idPrefix = \"radio-animal\"\n        }\n        |> Radio.withSelected (Just Model.Felines)\n        |> Radio.withButtons\n            [ Radio.button Model.Felines \"Felines\"\n            , Radio.button Model.Canines \"Canines\"\n            , Radio.button Model.Birds \"Birds\"\n            ]\n        |> Radio.renderElement renderConfig\n\n\n# Types\n\n@docs RadioGroup, RadioButton\n\n\n# Constructors\n\n@docs group, button\n\n\n# Group management\n\n@docs withButtons, withSelected\n\n\n# Width\n\n@docs RadioWidth, withWidth, widthFull, widthRelative\n\n\n# Direction\n\n@docs Direction, horizontal, vertical, withDirection\n\n\n# Size\n\n@docs RadioSize, sizeSmall, sizeMedium, withSize\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Direction","comment":" Describes the direction in which the radio group will be rendered.\n","args":[],"cases":[]},{"name":"RadioButton","comment":" The `RadioButton option` describes an individual radio-button\n","args":["option"],"cases":[]},{"name":"RadioGroup","comment":" The `RadioGroup option msg` type is used for describing the component for later rendering.\n","args":["option","msg"],"cases":[]},{"name":"RadioSize","comment":" Describes the size of the radio buttons\n","args":[],"cases":[]},{"name":"RadioWidth","comment":" Describes a compatible width.\n","args":[],"cases":[]}],"aliases":[],"values":[{"name":"button","comment":" A radio button and an element of a radio group.\n\n    Radio.button Model.OrangeJuice \"Orange Juice\"\n\n","type":"option -> String.String -> UI.Radio.RadioButton option"},{"name":"group","comment":" Starts an empty radio group.\n\n    someRadioGroup =\n        Radio.group\n            { label = \"Pick a card\"\n            , onSelectMsg = Msg.CardPicking\n            , idPrefix = \"card\" -- Will result in \"card-king-spades\"\n            }\n\n","type":"{ label : String.String, onSelectMsg : String.String -> option -> msg, idPrefix : String.String } -> UI.Radio.RadioGroup option msg"},{"name":"horizontal","comment":" When displaying, arrange the buttons in horizontal lines.\n","type":"UI.Radio.Direction"},{"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.Radio.RadioGroup option msg -> Element.Element msg"},{"name":"sizeMedium","comment":" Medium radio buttons\n","type":"UI.Radio.RadioSize"},{"name":"sizeSmall","comment":" Small radio buttons (default value)\n","type":"UI.Radio.RadioSize"},{"name":"vertical","comment":" When displaying, arrange the buttons in a column.\n","type":"UI.Radio.Direction"},{"name":"widthFull","comment":" All the radio buttons' width will fill the container.\n","type":"UI.Radio.RadioWidth"},{"name":"widthRelative","comment":" The buttons will have the exact width to fit its contents.\n\n**NOTE**: This is the default value.\n\n","type":"UI.Radio.RadioWidth"},{"name":"withButtons","comment":" Replaces a group's list of radio buttons.\n\n    Radio.withButtons\n        [ Radio.button Model.OrangeJuice \"Orange Juice\"\n        , Radio.button Model.Lemonade \"Lemonade\"\n        , Radio.button Model.SodaSoftDrink \"Soda\"\n        ]\n        someRadioGroup\n\n","type":"List.List (UI.Radio.RadioButton option) -> UI.Radio.RadioGroup option msg -> UI.Radio.RadioGroup option msg"},{"name":"withDirection","comment":" `Radio.withDirection` determines whether the radio group's items are arranged horizontally or vertically.\n\n    Radio.withDirection Radio.horizontal someRadioGroup\n\n","type":"UI.Radio.Direction -> UI.Radio.RadioGroup option msg -> UI.Radio.RadioGroup option msg"},{"name":"withSelected","comment":" Define one element as selected.\n\n    Radio.withSelected (Just Model.DoubleCheddar)\n\n","type":"Maybe.Maybe option -> UI.Radio.RadioGroup option msg -> UI.Radio.RadioGroup option msg"},{"name":"withSize","comment":" `Radio.withSize` changes the size of the radio buttons\n\n    Radio.withSize Radio.sizeMedium someRadioGroup\n\n","type":"UI.Radio.RadioSize -> UI.Radio.RadioGroup option msg -> UI.Radio.RadioGroup option msg"},{"name":"withWidth","comment":" `Radio.withWidth` changes the width of the group.\n\n    Radio.withWidth Radio.widthFull someRadioGroup\n\n","type":"UI.Radio.RadioWidth -> UI.Radio.RadioGroup option msg -> UI.Radio.RadioGroup option 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.init\n        { width = flags.innerWidth\n        , height = flags.innerHeight\n        }\n        RenderConfig.localeEnglish\n\n\n# Building\n\n@docs RenderConfig, init\n\n\n# Locales\n\n@docs Locale, localeEnglish, localeFrench, localePortuguese, localeSpanish\n\n\n# Update\n\n@docs updateWindow, updateLocale\n\n\n# Responsivity\n\n@docs isMobile, isPortrait\n\n\n# Layout\n\n@docs elLayoutAttributes\n\n","unions":[],"aliases":[{"name":"Locale","comment":" Define how to alterate text and dates to fit a localization profile.\n","args":[],"type":"UI.Internal.RenderConfig.Locale"},{"name":"RenderConfig","comment":" `RenderConfig.RenderConfig` upholds all the information required for the components to apply the responsivity and accessibility changes.\n","args":[],"type":"UI.Internal.RenderConfig.RenderConfig"}],"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.Document.toBrowserDocument`](UI-Document#toBrowserDocument) 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":"init","comment":" `RenderConfig.init` builds a [`RenderConfig.RenderConfig`](UI-RenderConfig#RenderConfig) with the minimum necessary information for responsivity to work.\n\n    RenderConfig.init\n        { width = 1920\n        , height = 1080\n        }\n        RenderConfig.localeEnglish\n\n","type":"{ window | height : Basics.Int, width : Basics.Int } -> UI.RenderConfig.Locale -> 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":"localeEnglish","comment":" Equivalent to en-US according to ISO 639.1 and ISO 3166.\n","type":"UI.RenderConfig.Locale"},{"name":"localeFrench","comment":" Equivalent to fr-FR according to ISO 639.1 and ISO 3166.\n","type":"UI.RenderConfig.Locale"},{"name":"localePortuguese","comment":" Equivalent to pt-PT according to ISO 639.1 and ISO 3166.\n","type":"UI.RenderConfig.Locale"},{"name":"localeSpanish","comment":" Equivalent to es-ES according to ISO 639.1 and ISO 3166.\n","type":"UI.RenderConfig.Locale"},{"name":"updateLocale","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":"UI.RenderConfig.Locale -> UI.RenderConfig.RenderConfig -> UI.RenderConfig.RenderConfig"},{"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.Switch","comment":" Accessible and uniform-styled implementation of a switch.\n\n    Switch.default \"Flying mode.\"\n        Msg.ToggleThis\n        True\n        |> Switch.withColor Switch.success\n        |> Switch.renderElement renderConfig\n\n\n# Building\n\n@docs Switch, default, success, danger\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"Switch","comment":" The `Switch msg` type is used for describing the component for later rendering.\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"danger","comment":" This switch has the danger-color, and it's reddish for enforcing the user's attention.\n\n    Switch.danger \"Toggle root access\"\n        (Msg.SetRootAccess <| not model.hasRoot)\n        model.hasRoot\n\n","type":"String.String -> (Basics.Bool -> msg) -> Basics.Bool -> UI.Switch.Switch msg"},{"name":"default","comment":" Defines all the required properties for creating a switch. This default switch is half-opaque black.\n\n    Switch.default \"Flight mode\"\n        (Msg.SetFlightMode <| not model.flightModeEnabled)\n        model.flightModeEnabled\n\n","type":"String.String -> (Basics.Bool -> msg) -> Basics.Bool -> UI.Switch.Switch 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.Switch.Switch msg -> Element.Element msg"},{"name":"success","comment":" This switch has the success-color, and it's greenish for enforcing success.\n\n    Switch.success \"Toggle Firewall\"\n        (Msg.SetFirewall <| not model.hasFirewall)\n        model.hasFirewall\n\n","type":"String.String -> (Basics.Bool -> msg) -> Basics.Bool -> UI.Switch.Switch msg"}],"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, rowCellLink, rowCellCustom\n\n\n# Individual cell\n\n@docs Cell, cellFromText, cellFromButton, cellFromLink, cellFromCustom\n\n","unions":[],"aliases":[{"name":"Cell","comment":" A singular cell of a table.\nCan hold texts, buttons or any custom `Element msg`.\n","args":["msg"],"type":"UI.Internal.Tables.Common.Cell msg"},{"name":"ColumnWidth","comment":" `ColumnWidth` specifies a cell's width.\n","args":[],"type":"UI.Internal.Tables.Common.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.Tables.Common.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":"{ toKey : item -> String.String, view : 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":"cellFromCustom","comment":" Creates a cell with an `Element msg` inside.\n\n    cellFromCustom <| Element.row [] [ Element.text \"Hello\", Element.text \"World\" ]\n\n","type":"Element.Element msg -> UI.Tables.Common.Cell msg"},{"name":"cellFromLink","comment":" Creates a cell with a good-old hyperlink from a text.\n\nText may be ellipsized to fit cell's width.\n\n    cellFromLink\n        (Link.link \"https://www.google.com\")\n        (Text.body2 \"Go to Google\")\n\n","type":"UI.Link.Link -> UI.Text.Text -> UI.Tables.Common.Cell msg"},{"name":"cellFromText","comment":" Creates a cell with some text content.\n\nText may be ellipsized to fit cell's width.\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":"rowCellCustom","comment":" Transforms any `Element msg` into a cell appending it to a row.\n\nSimilar to [`cellFromCustom`](#cellFromCustom) but infused for rows.\n\n    rowEmpty\n        |> rowCellText (Text.body1 \"Aldebaran\")\n        |> rowCellCustom (Element.text \"Hello\")\n\n","type":"Element.Element msg -> UI.Tables.Common.Row msg columns -> UI.Tables.Common.Row msg (UI.Utils.TypeNumbers.Increase columns)"},{"name":"rowCellLink","comment":" Transforms a `UI.Text` into a hyperlinked-cell appending it to a row.\n\nSimilar to [`cellFromText`](#cellFromText) but infused for rows.\n\n    rowEmpty\n        |> rowCellLink (Link.link \"https://starbucks.com\") (Text.body1 \"Starbucks\")\n        |> rowCellText (Text.body2 \"Coffe and Capuccino\")\n\n","type":"UI.Link.Link -> UI.Text.Text -> 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 =\n        { toKey = .title, toTableRowView}\n\n    toTableRowView { 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.stateWithFilters 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, stateWithItems, stateWithPaginator\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# Sorting\n\n@docs Sorters, stateWithSorters\n@docs sortersEmpty, sortBy, sortByFloat, sortByInt, sortByChar, sortWith, unsortable\n@docs sortDecreasing, sortIncreasing\n\n\n# Size\n\n@docs withWidth, withContentWidth, withHeight\n\n\n# Selection\n\n\n## Local\n\n@docs stateWithSelection, stateIsSelected\n\n\n## Remote\n\nTODO: withRemoteSelection\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":["item"],"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":"{ title : String.String, caption : Maybe.Maybe String.String }"},{"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.Tables.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":"Sorters","comment":" Array with all the columns' sorting definitions.\n\nThis is a type-safe sized-array.\nSee [`TypeNumbers`](UI-Utils-TypeNumbers) for how to compose its phantom type.\n\n","args":["item","columns"],"type":"UI.Internal.Tables.Sorters.Sorters item columns"},{"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 item -> 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.Tables.Filters.Filters msg item columns -> UI.Internal.Tables.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":"sortBy","comment":" Allow sorting a column alphabetically.\n\n    sortersInit =\n        sortersEmpty\n            |> sortBy .title\n            |> sortBy .author\n            |> unsortable\n\n","type":"(item -> String.String) -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"sortByChar","comment":" Allow sorting a column using a Char value.\n\n    sortersInit =\n        sortersEmpty\n            |> unsortable\n            |> sortByChar .firstLetter\n\n","type":"(item -> Char.Char) -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"sortByFloat","comment":" Allow sorting a column using a Float value.\n\n    sortersInit =\n        sortersEmpty\n            |> unsortable\n            |> sortByFloat .value\n            |> sortByFloat .timestamp\n            |> sortByFloat .average\n\n","type":"(item -> Basics.Float) -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"sortByInt","comment":" Allow sorting a column using an Integer value.\n\n    sortersInit =\n        sortersEmpty\n            |> unsortable\n            |> sortByInt .count\n            |> sortByInt .areaCode\n            |> sortByInt .hour\n\n","type":"(item -> Basics.Int) -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"sortDecreasing","comment":" Changes the initial sorting to some columns as descreasing.\n\n    model =\n        stateWithSorters\n            (Book.sortersInit |> sortDecreasing 1)\n            init\n\n","type":"Basics.Int -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item columns"},{"name":"sortIncreasing","comment":" Changes the initial sorting to some columns as increasing.\n\n    model =\n        stateWithSorters\n            (Book.sortersInit |> sortIncreasing 1)\n            init\n\n","type":"Basics.Int -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item columns"},{"name":"sortWith","comment":" Allow sorting a column with a custom function.\nCheck [`List.sortWith`](https://package.elm-lang.org/packages/elm/core/latest/List#sortWith)\n\n    sortersInit =\n        sortersEmpty\n            |> unsortable\n            |> sortWith flippedComparison\n\n","type":"(item -> item -> Basics.Order) -> UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase columns)"},{"name":"sortersEmpty","comment":" An empty [`Sorters`](#Sorters) set.\n\n    sortersInit =\n        sortersEmpty\n            |> sortBy .title\n            |> sortBy .author\n            |> unsortable\n\n","type":"UI.Tables.Stateful.Sorters item UI.Utils.TypeNumbers.Zero"},{"name":"stateIsSelected","comment":" Resolves if one item's row is or not selected.\n\n    isHungerGamesSelected =\n        Table.stateIsSelected hungerGamesBook tableState\n\n","type":"item -> UI.Tables.Stateful.State msg item columns -> Basics.Bool"},{"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":"stateWithItems","comment":" Each of these items will become a row in this table.\n\n    stateWithItems\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        someTableState\n\n","type":"List.List item -> UI.Tables.Stateful.State msg item columns -> UI.Tables.Stateful.State msg item columns"},{"name":"stateWithPaginator","comment":" Displays an paginator at the bottom of the table.\n\n    withPaginator someTable\n\n","type":"UI.Tables.Stateful.State msg item columns -> UI.Tables.Stateful.State msg item columns"},{"name":"stateWithSelection","comment":" Apply selection defintion to a table's [`State`](#State).\n\n    model =\n        stateWithSelection Book.getISBN init\n\n","type":"(item -> String.String) -> Basics.Bool -> UI.Tables.Stateful.State msg item columns -> UI.Tables.Stateful.State msg item columns"},{"name":"stateWithSorters","comment":" Apply sortings defintion to a table's [`State`](#State).\n\n    model =\n        stateWithSorters Book.sortersInit init\n\n","type":"UI.Tables.Stateful.Sorters 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":"unsortable","comment":" Describes that some column is not sortable.\n\n    sortersInit =\n        sortersEmpty\n            |> sortBy .title\n            |> sortBy .author\n            |> unsortable\n\n","type":"UI.Tables.Stateful.Sorters item columns -> UI.Tables.Stateful.Sorters item (UI.Utils.TypeNumbers.Increase 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 item -> UI.Tables.Stateful.State msg item columns -> ( UI.Tables.Stateful.State msg item columns, UI.Effects.Effects msg )"},{"name":"withContentWidth","comment":" Allows expanding the content width when using a scrollbar.\n\n    Table.withContentWidth\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"},{"name":"withHeight","comment":" Applies [`Element.height`](/packages/mdgriffith/elm-ui/latest/Element#height) to the component.\n\n    Table.withHeight\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"},{"name":"withItems","comment":" **DEPRECATED**: Use [stateWithItems](#stateWithItems) instead.\nOtherwise, by using this you'll be discarding sorting and fitlering.\n\nEach 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.Tabs","comment":" Tab allows visually selecting a page in a horizontal list.\n\nExample of usage:\n\n    TabList.tabList Msg.SportSelect\n        Sports.toString\n        [ Sports.Soccer\n        , Sports.Basket\n        , Sports.Bowling\n        ]\n        model.sportSelected\n        |> TabList.renderElement renderConfig\n\n\n# Building\n\n@docs TabList, tabList, actionTabList\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"TabList","comment":" The `TabList msg a` type is used for describing the component for later rendering.\n","args":["msg","a"],"cases":[]}],"aliases":[],"values":[{"name":"actionTabList","comment":" Similar to [`tabList`](#tabList) but using [`Àction msg`](UI-Utils-Action#Action) instead.\n\n    Tabs.actionTabList (tabToLink >> Action.TriggerRedirect)\n        tabToString\n        [ TabOne, TabTwo ]\n        model.tabSelected\n\n","type":"(a -> UI.Utils.Action.Action msg) -> (a -> String.String) -> List.List a -> a -> UI.Tabs.TabList msg a"},{"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.Tabs.TabList msg a -> Element.Element msg"},{"name":"tabList","comment":" Describes everything required to create a [`TabList msg a`](#TabList).\n\n    Tabs.tabList Msg.TabSelect\n        tabToString\n        [ TabOne, TabTwo ]\n        model.tabSelected\n\n","type":"(a -> msg) -> (a -> String.String) -> List.List a -> a -> UI.Tabs.TabList msg a"}],"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.withOverflow ellipsize\n        |> Text.renderElement renderConfig\n        |> Element.el [ Element.width (px 200) ]\n\n**Note**: Don't forget to import \"Fira Sans\" family, with the weights: 400, 500, 600 and 700.\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# Overflow\n\n@docs withOverflow, ellipsize, ellipsizeWithTooltip, wrap\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":"ellipsize","comment":" Truncates the text and adds the ellipsis.\n","type":"UI.Internal.Text.TextOverflow"},{"name":"ellipsizeWithTooltip","comment":" Truncates the text, adds the ellipsis and displays a tooltip with the whole content.\n","type":"UI.Internal.Text.TextOverflow"},{"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":"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"},{"name":"withOverflow","comment":" Determines how the text overflow is handled.\n\n    \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n        |> Text.heading3\n        |> Text.withOverflow ellipsize\n        |> Text.renderElement renderConfig\n        |> Element.el [ Element.width (px 42) ]\n\n","type":"UI.Internal.Text.TextOverflow -> UI.Text.Text -> UI.Text.Text"},{"name":"wrap","comment":" Lets the text break lines to prevent overflow.\nDefault behavior.\n","type":"UI.Internal.Text.TextOverflow"}],"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","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.Tile","comment":" Use this when you want [Radios](UI-Radio) with icons.\n\n    Tile.group Msg.SetTile\n        \"Pick a delivery vehicle\"\n        |> Tile.withSelected model.selected\n        |> Tile.withButtons\n            [ Tile.tile TileModel.Car <| Icon.car \"Car\"\n            , Tile.tile TileModel.Van <| Icon.van \"Van\"\n            , Tile.tile TileModel.Truck <| Icon.truck \"Truck\"\n            , Tile.tile TileModel.Motorbike <| Icon.bike \"Motorbike\"\n            , Tile.tile TileModel.Bicycle <| Icon.bicycle \"Bicycle\"\n            , Tile.tile TileModel.ECar <| Icon.eCar \"E-Car\"\n            , Tile.tile TileModel.EVan <| Icon.eVan \"E-Van\"\n            , Tile.tile TileModel.EBike <| Icon.eBike \"E-Bike\"\n            ]\n        |> Tile.renderElement renderConfig\n\n\n# Types\n\n@docs SelectionTiles, SelectionTile\n\n\n# Constructors\n\n@docs tile, group\n\n\n# Group management\n\n@docs withTiles, withSelected, withMultipleSelected, withExplicitStateMsg\n\n\n# Rendering\n\n@docs renderElement\n\n","unions":[{"name":"SelectionTile","comment":" The `SelectionTile option` describes an individual selection tile.\n","args":["option"],"cases":[]},{"name":"SelectionTiles","comment":" The `SelectionTiles option msg` type is used for describing the component for later rendering.\n","args":["option","msg"],"cases":[]}],"aliases":[],"values":[{"name":"group","comment":" Starts an empty selection tile group.\nThe first argument is the message triggered when there is a selection.\nThe second one is the label used for accessibility (ARIA).\n\n    someTileGroup =\n        Tile.group Msg.CardPicking \"Pick a card\"\n\n","type":"(option -> msg) -> String.String -> UI.Tile.SelectionTiles option 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.Tile.SelectionTiles option msg -> Element.Element msg"},{"name":"tile","comment":" A selection tile and an element of a selection tiles group.\n\n    Tile.tile Model.OrangeJuice <| Icon.orangeJuice \"Orange Juice\"\n\n","type":"option -> UI.Icon.Icon -> UI.Tile.SelectionTile option"},{"name":"withExplicitStateMsg","comment":" Receive in the message the correct new state of the tile.\n\n    Tile.group\n        (\\which newBooleanState -> SetSomeTile which newBooleanState)\n        \"SomeGroup\"\n        |> Tile.withExplicitStateMsg\n\n","type":"UI.Tile.SelectionTiles option (Basics.Bool -> msg) -> UI.Tile.SelectionTiles option msg"},{"name":"withMultipleSelected","comment":" Define multiple elements as selected.\n\n    Tile.withMultipleSelected [ Model.DoubleCheddar, Model.XSalad ]\n\n","type":"List.List option -> UI.Tile.SelectionTiles option msg -> UI.Tile.SelectionTiles option msg"},{"name":"withSelected","comment":" Define one element as selected.\n\n    Tile.withSelected (Just Model.DoubleCheddar)\n\n","type":"Maybe.Maybe option -> UI.Tile.SelectionTiles option msg -> UI.Tile.SelectionTiles option msg"},{"name":"withTiles","comment":" Replaces a group's list of selection tiles.\n\n    Tile.withTiles\n        [ Tile.tile Model.OrangeJuice <| Icon.orangeJuice \"Orange Juice\"\n        , Tile.tile Model.Lemonade <| Icon.lemonade \"Lemonade\"\n        , Tile.tile Model.SodaSoftDrink <| Icon.sodaSoftDrink \"Soda\"\n        ]\n        someTileGroup\n\n","type":"List.List (UI.Tile.SelectionTile option) -> UI.Tile.SelectionTiles option msg -> UI.Tile.SelectionTiles option msg"}],"binops":[]},{"name":"UI.Utils.ARIA","comment":" Interface for [HTML's ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA).\n\n@docs ElementSemantics\n\n\n# Building\n\n@docs roleButton, roleImage, rolePresentation, roleCheckbox, roleTab, roleSwitch, roleToggleButton\n\n\n## Radio buttons\n\n@docs roleRadioGroup, roleRadio\n\n\n# Global options\n\n@docs withLabel\n\n\n# Rendering\n\n@docs toElementAttributes\n\n","unions":[],"aliases":[{"name":"ElementSemantics","comment":" Use roles for creating ARIA element's semantics.\nRoles 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":[],"type":"{ role : UI.Utils.ARIA.Role, label : Maybe.Maybe String.String }"}],"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**NOTE**: This role enforces aria-label option.\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**NOTE**: This role enforces aria-label option.\n\n","type":"String.String -> UI.Utils.ARIA.ElementSemantics"},{"name":"roleSwitch","comment":" \"The ARIA switch role is functionally identical to the checkbox role,\nexcept that instead of representing checked/unchecked states, which are fairly generic in meaning,\nthe switch role represents the states on/off.\" -MDN\n\n    Element.el\n        (Event.onClick turnOnMsg :: (ARIA.toElementAttributes <| ARIA.roleSwitch False))\n        offSwitchIcon\n\n","type":"Basics.Bool -> UI.Utils.ARIA.ElementSemantics"},{"name":"roleTab","comment":" \"The ARIA tab role indicates an interactive element inside a tablist.\" -MDN\n\n    Element.row []\n        [ Element.el\n            (ARIA.roleTab True\n                |> ARIA.toElementAttributes\n                |> (::) tabIndex 0\n                |> (::) Event.onClick (Msg.SetTab TabFirst)\n            )\n            (Element.text \"Tab label\")\n        , Element.el\n            (ARIA.roleTab False\n                |> ARIA.toElementAttributes\n                |> (::) tabIndex -1\n                |> (::) Event.onClick (Msg.SetTab TabSecond)\n            )\n            (Element.text \"Another tab\")\n        ]\n\n**NOTE**: We're missing `aria-controls`.\nAnd MDN recomends using `tabindex` as `0` on selected tab and `-1` on non-active tabs.\n\n","type":"Basics.Bool -> UI.Utils.ARIA.ElementSemantics"},{"name":"roleToggleButton","comment":" A toggle button has the button role along with its pressed state\n\n    Element.el\n        (Events.onClick Msg.SomeEvent\n            :: ARIA.toElementAttributes ARIA.roleToggleButton isToggled\n        )\n        someChildElement\n\n","type":"Basics.Bool -> 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)"},{"name":"withLabel","comment":" \"Defines a string value that labels the current element\" -W3C\n\n    ARIA.roleCheckbox False\n        |> ARIA.withLabel \"I agree with the policy\"\n        |> ARIA.toElementAttributes\n\n**NOTE**: This is a global optional parameter, roles builders enforce it when necessary.\n\n","type":"String.String -> UI.Utils.ARIA.ElementSemantics -> UI.Utils.ARIA.ElementSemantics"}],"binops":[]},{"name":"UI.Utils.Action","comment":" Describes a clickable element for components with customizable clickable action.\n\n\n# Building\n\n@docs Action\n\n\n# Helpers\n\n@docs WithIcon, iconMap, iconWith\n\n","unions":[{"name":"Action","comment":" Either a message to be dispatched, or an link to be followed.\n","args":["msg"],"cases":[["DispatchMsg",["msg"]],["TriggerRedirect",["UI.Link.Link"]]]}],"aliases":[{"name":"WithIcon","comment":" `WithIcon` assembles the required configuration for having an action element.\n\n    { label = \"Create new element\"\n    , icon = Icon.add\n    , action =\n        DialogMsg.OpenElementCreation\n            |> Msg.ForDialog\n            |> Action.DispatchMsg\n    }\n\n","args":["msg"],"type":"{ action : UI.Utils.Action.Action msg, icon : String.String -> UI.Icon.Icon, label : String.String }"}],"values":[{"name":"iconMap","comment":" Applies a transformation to the message in a `WithIcon msg`, when it exists.\n\n    Action.iconMap\n        PageMsg.ForDialog\n        { action = Action.DispatchMsg DialogMsg.Close\n        , icon = Icon.close\n        , label = \"Close\"\n        }\n\n","type":"(a -> b) -> UI.Utils.Action.WithIcon a -> UI.Utils.Action.WithIcon b"},{"name":"iconWith","comment":" Applies a transformation to the icon in a `WithIcon msg`.\n\n    Action.iconWith\n        (Icon.withSize Size.small)\n        { action = Action.DispatchMsg DialogMsg.Close\n        , icon = Icon.close\n        , label = \"Close\"\n        }\n\n","type":"(UI.Icon.Icon -> UI.Icon.Icon) -> UI.Utils.Action.WithIcon msg -> UI.Utils.Action.WithIcon msg"}],"binops":[]},{"name":"UI.Utils.DateInput","comment":" Required type for comparing and validating date inputs.\n\n\n# Internal types\n\n@docs DateInput, PeriodComparison\n\n\n# Useful record\n\n@docs PeriodDate, RangeDate\n\n\n# Transformation\n\n@docs toDD_MM_YYYY, fromPosix\n\n","unions":[],"aliases":[{"name":"DateInput","comment":" `DateInput.DateInput` is used for describing dates in the UI.\n","args":[],"type":"UI.Internal.DateInput.DateInput"},{"name":"PeriodComparison","comment":" `DateInput.PeriodComparison` is used to compare date and time ranges.\n","args":[],"type":"UI.Internal.DateInput.PeriodComparison"},{"name":"PeriodDate","comment":" `DateInput.PeriodDate` is used to contain both date and comparison information.\n","args":[],"type":"{ date : UI.Utils.DateInput.DateInput, comparison : UI.Utils.DateInput.PeriodComparison }"},{"name":"RangeDate","comment":" `DateInput.RangeDate` is used to describe a range of dates.\n","args":[],"type":"{ from : UI.Utils.DateInput.DateInput, to : UI.Utils.DateInput.DateInput }"}],"values":[{"name":"fromPosix","comment":" Transform a time with time zone into a DateInput\n","type":"Time.Zone -> Time.Posix -> UI.Utils.DateInput.DateInput"},{"name":"toDD_MM_YYYY","comment":" Transforms a string into a `DateInput.DateInput`\n","type":"String.String -> UI.Utils.DateInput.DateInput -> String.String"}],"binops":[]},{"name":"UI.Utils.Element","comment":" Utilities and functionality that are not covered by Elm UI.\n\n\n# Render\n\n@docs renderIf\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, maxHeightVH, maxHeightPct, minHeightVH\n\n\n# Input\n\n@docs disabled, onEnterPressed, onIndividualClick\n@docs nameUsername, namePassword\n\n\n# Padding, borders and size\n\n@docs RectangleSides, zeroPadding\n\n\n# Transition\n\n@docs fadeOut, slideOutLeft, transition\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":"fadeOut","comment":" A transition that fades away an element\n","type":"UI.Utils.Element.Transition 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":"minHeightVH","comment":" Wrapper for CSS's `min-height: {{vaue}}vh`.\n\n    Element.el [ Element.minHeightVH 50 ] someChildElement\n\n","type":"Basics.Int -> Element.Attribute msg"},{"name":"namePassword","comment":" LastPass (the password manager) expects both username and password inputs to be inside an HTML form.\nAs we can't create forms with elm-ui, to trigger the password's autofill and username all at once, we need either id or name equals to \"password\".\n\nThis function sets the attribute `name=\"password\"`.\n\n","type":"Element.Attribute msg"},{"name":"nameUsername","comment":" LastPass (the password manager) expects both username and password inputs to be inside an HTML form.\nAs we can't create forms with elm-ui, to trigger the username's autofill, we need either id or name equals to \"username\".\n\nThis function sets the attribute `name=\"username\"`.\n\n","type":"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":"renderIf","comment":" Utility to conditionally render an element. **This is not meant for\nbig/complex view functions due to performance implications**.\n\n    Element.row [] []\n        |> renderIf model.shouldDisplay\n\n","type":"Basics.Bool -> Element.Element msg -> Element.Element msg"},{"name":"slideOutLeft","comment":" A transition that hides the element sliding it to the left\n","type":"UI.Utils.Element.Transition 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":"transition","comment":" Applies the attributes of a transition for the given on/off state\n\n    Element.row\n        (onClick DoSomething\n            :: transition isCollapsed fadeOut\n        )\n        []\n\n","type":"Basics.Bool -> UI.Utils.Element.Transition msg -> List.List (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, focus\n@docs withOnEnter, withOnLeave, withTabIndex\n\n\n# Element Attributes\n\n@docs toElementAttributes\n\n","unions":[{"name":"Focus","comment":" Required configuration for managing focus.\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"focus","comment":" Allow paack-ui to know the one useful thing for visually focus feedback: Is it focused?\n\n    Focus.focus True\n\n","type":"Basics.Bool -> UI.Utils.Focus.Focus msg"},{"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)"},{"name":"withOnEnter","comment":" Allow paack-ui to message a feedback when focus enters the element.\n\n    Focus.focus model.isInputFocused\n        |> Focus.withOnEnter Msg.InputFocused\n\n","type":"msg -> UI.Utils.Focus.Focus msg -> UI.Utils.Focus.Focus msg"},{"name":"withOnLeave","comment":" Allow paack-ui to message a feedback when focus leaves the element.\n\n    Focus.focus model.isInputFocused\n        |> Focus.withOnLeave Msg.InputFocusLost\n\n","type":"msg -> UI.Utils.Focus.Focus msg -> UI.Utils.Focus.Focus msg"},{"name":"withTabIndex","comment":" Makes the element keyboard-interactive.\n\n    Focus.focus model.isInputFocused\n        |> Focus.withTabIndex -1\n\n","type":"Basics.Int -> UI.Utils.Focus.Focus msg -> UI.Utils.Focus.Focus 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@docs Decimal\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":"Decimal","comment":" Used to compose numbers greater than nine.\n\n`(Decimal (Decimal Zero))` is equivalent to 20.\n\n","args":["base"],"type":"UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase (UI.Utils.TypeNumbers.Increase base)))))))))"},{"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":[]}]