docs.json

[{"name":"Listbox","comment":" Implementation of the [listbox\nwidget](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox):\n\n> A listbox widget presents a list of options and allows a user to select one\n> or more of them.\n\nTake a look at the documentation of `Behaviour` for the default keyboard\ninteractions this widget offers.\n\n\n# View\n\n@docs view, Instance, Label, labelledBy, label, noLabel\n\n\n# State management\n\n@docs Listbox, init\n@docs update, Msg, subscriptions\n@docs Behaviour\n\n\n## Type-ahead\n\n@docs TypeAhead, noTypeAhead, simpleTypeAhead, typeAhead\n\n\n# View customization\n\n@docs Views, html\n\n\n## Advanced customization\n\n@docs custom, ListboxAttrs, OptionAttrs\n\n\n# Unique selection\n\nIf you need a `Listbox` allowing only **at most one** selection. You just have\nto replace the `view`, `update`, ... functions with the following ones in this\nsection.\n\n@docs viewUnique, updateUnique\n\n@docs focusEntryUnique, focusNextOrFirstEntryUnique, focusPreviousOrFirstEntryUnique\n\n\n# Advanced usage\n\n\n## State info\n\n@docs focusedEntry, focusedEntryId, hoveredEntry\n\n\n## State manipulation\n\n@docs focusEntry, focusNextOrFirstEntry, focusPreviousOrFirstEntry\n\n\n## DOM Stuff\n\n@docs focus\n\n@docs scrollToFocus\n\n@docs preventDefaultOnKeyDown\n\n","unions":[{"name":"Listbox","comment":" Tracks the keyboard and mouse focus as well as the current query. The full\nlist of entries and the currently selected option(s) live in your own model.\n","args":[],"cases":[]},{"name":"Msg","comment":" ","args":["a"],"cases":[]},{"name":"TypeAhead","comment":" ","args":["a"],"cases":[]},{"name":"Views","comment":" Opaque type for providing view customization of the listbox widget.\n","args":["a","node","msg"],"cases":[]}],"aliases":[{"name":"Behaviour","comment":" **Available behaviour customizations**\n\nYou can customize the behaviour of the listbox with the following options:\n\n  - **jumpAtEnds**: Whether the keyboard focus should jump to the other end of\n    the list when pressing `ArrowUp` while focusing the first option (or\n    `ArrowDown` while focusing the last).\n\n  - **separateFocus**: Whether the mouse focus and the keyboard focus can be\n    different.\n\n  - **selectionFollowsFocus**: Do we automatically add the entry gaining\n    keyboard focus to the selection?\n\n  - **handleHomeAndEnd**: Should we handle the `Home` and `End` keys (to jump\n    to the top or bottom of the list)?\n\n  - **typeAhead**: Make it possible to jump to options by typing in a query.\n    Take a look at `TypeAhead` for more information.\n\n  - **minimalGap**: If the distance (in px) of the option having the keyboard\n    focus to the borders of the listbox's viewport is smaller then this value,\n    the listbox will adjust its scroll position so that this distance is at least\n    `initialGap`.\n\n  - **initialGap**: The minimal distance (in px) of the option having the\n    keyboard focus to the borders of the listbox's viewport after the scroll\n    position has been adjusted.\n\nA behaviour configuration could look something like this:\n\n    behaviour : Behaviour String\n    behaviour =\n        { jumpAtEnds = True\n        , separateFocus = True\n        , selectionFollowsFocus = False\n        , handleHomeAndEnd = True\n        , typeAhead = simpleTypeAhead 300 identity\n        , minimalGap = 30\n        , initialGap = 200\n        }\n\nThe listbox will behave as explained in the [WAI-ARIA Authoring Practices\n1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) in the _Keyboard\nInteraction_ section. Note that you get the _recommended selection model_ if\nyou choose `selectionFollowsFocus = False`, and the _alternative\nselection model_ for `selectionFollowsFocus = True`.\n\n","args":["a"],"type":"{ jumpAtEnds : Basics.Bool, separateFocus : Basics.Bool, selectionFollowsFocus : Basics.Bool, handleHomeAndEnd : Basics.Bool, typeAhead : Listbox.TypeAhead a, minimalGap : Basics.Float, initialGap : Basics.Float }"},{"name":"Instance","comment":" To make a listbox unique in your application you have to provide this\ninformation to the `view` function:\n\n  - **id**: The unique id of the listbox.\n\n  - **label**: Specify how the listbox is labelled. See `Label` for\n    possible options.\n\n  - **lift**: Your message type constructor wrapping the listbox `Msg`'s.\n\n","args":["a","msg"],"type":"{ id : String.String, label : Listbox.Label, lift : Listbox.Msg a -> msg }"},{"name":"Label","comment":" There are three possibilities to label a listbox: it can be\n`labelledBy` by another DOM element with the given id, it can provide its own\n`label`, or it can have `noLabel` at all.\n\nThe last case is only allowed when the listbox is part of another widget which\nitself is labelled.\n\n","args":[],"type":"Internal.Label.Label"},{"name":"ListboxAttrs","comment":" TODO\n","args":["msg"],"type":"{ id : String.String, role : String.String, ariaMultiselectable : String.String, ariaLabelledby : Maybe.Maybe String.String, ariaLabel : Maybe.Maybe String.String, ariaActivedescendant : Maybe.Maybe String.String, tabindex : Maybe.Maybe Basics.Int, preventDefaultOnKeydown : Json.Decode.Decoder ( msg, Basics.Bool ), onMousedown : msg, onMouseup : msg, onFocus : msg, onBlur : msg }"},{"name":"OptionAttrs","comment":" TODO\n","args":["msg"],"type":"{ id : String.String, role : String.String, ariaSelected : Maybe.Maybe String.String, onMouseenter : msg, onMouseleave : msg, onClick : msg }"}],"values":[{"name":"custom","comment":" If you want to use other UI libraries like `rtfeldman/elm-css` or\n`mdgriffith/elm-ui` you have to generate Views using this function. Take a look\nat the implementation of `html` for a starting point. The `examples/` folder of\nthe package repository contains an implementation for `mdgriffith/elm-ui`.\n","type":"{ listbox : Listbox.ListboxAttrs msg -> { options : List.List node } -> node, option : Listbox.OptionAttrs msg -> { selected : Basics.Bool, focused : Basics.Bool, hovered : Basics.Bool, maybeQuery : Maybe.Maybe String.String } -> a -> node } -> Listbox.Views a node msg"},{"name":"focus","comment":" A task to give the listbox focus. The first argument must match the\n`Instance` used in the `view` function!\n","type":"Listbox.Instance a msg -> Task.Task Browser.Dom.Error ()"},{"name":"focusEntry","comment":" Sets the keyboard focus to the provided options.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> a -> Listbox.Listbox -> List.List a -> ( Listbox.Listbox, List.List a )"},{"name":"focusEntryUnique","comment":" Sets the keyboard focus to the provided options.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> a -> Listbox.Listbox -> Maybe.Maybe a -> ( Listbox.Listbox, Maybe.Maybe a )"},{"name":"focusNextOrFirstEntry","comment":" Sets the keyboard focus to the next option. If `jumpAtEnds` is true and the\nfocus is already on the last option, the first option is selected.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Listbox -> List.List a -> ( Listbox.Listbox, List.List a )"},{"name":"focusNextOrFirstEntryUnique","comment":" Sets the keyboard focus to the next option. If `jumpAtEnds` is true and the\nfocus is already on the last option, the first option is selected.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Listbox -> Maybe.Maybe a -> ( Listbox.Listbox, Maybe.Maybe a )"},{"name":"focusPreviousOrFirstEntry","comment":" Sets the keyboard focus to the previous option. If `jumpAtEnds` is true and the\nfocus is already on the first option, the first option is selected.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Listbox -> List.List a -> ( Listbox.Listbox, List.List a )"},{"name":"focusPreviousOrFirstEntryUnique","comment":" Sets the keyboard focus to the previous option. If `jumpAtEnds` is true and the\nfocus is already on the first option, the first option is selected.\n\n**Note**: This will not adjust the scroll position of the listbox, so you might\nwant to apply `scrollToFocus` afterwards.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Listbox -> Maybe.Maybe a -> ( Listbox.Listbox, Maybe.Maybe a )"},{"name":"focusedEntry","comment":" Returns the option which currently has keyboard focus.\n","type":"(a -> String.String) -> List.List a -> Listbox.Listbox -> Maybe.Maybe a"},{"name":"focusedEntryId","comment":" Returns the HTML id of the currently focused entry.\n","type":"{ uniqueId : a -> String.String, focusable : Basics.Bool, markActiveDescendant : Basics.Bool } -> Listbox.Instance a msg -> List.List a -> Listbox.Listbox -> Maybe.Maybe String.String"},{"name":"hoveredEntry","comment":" Returns the option which currently has mouse focus.\n","type":"(a -> String.String) -> List.List a -> Listbox.Listbox -> Maybe.Maybe a"},{"name":"html","comment":" Generate view customizations for the standard `elm/html` package. You can\ncustomize the styling with the following fields:\n\n  - **ul**: A list of html attributes applied to the outer listbox.\n\n  - **li**: A function returning `HtmlDetails` for each option in your\n    entries list. It gets the actual option value `a` and flags telling you if\n    this option is currently `selected`, `focused` or `hovered`. If the user\n    typed in a query, you get this via the `maybeQuery` field.\n\nThe DOM structure of a listbox will be something like this:\n\n    listbox =\n        Html.ul\n            [ ... ] -- ul attributes\n            [ Html.li\n                [ ... ] -- liDivider attributes\n                [ ... ] -- liDivider children\n            , Html.li\n                [ ... ] -- liOption attributes\n                [ ... ] -- liOption children\n            , ...\n            , Html.li\n                [ ... ] -- liOption attributes\n                [ ... ] -- liOption children\n            ]\n\n","type":"{ ul : List.List (Html.Attribute msg), li : { selected : Basics.Bool, focused : Basics.Bool, hovered : Basics.Bool, maybeQuery : Maybe.Maybe String.String } -> a -> { attributes : List.List (Html.Attribute msg), children : List.List (Html.Html msg) } } -> Listbox.Views a (Html.Html msg) msg"},{"name":"init","comment":" An initial listbox with no option focused.\n","type":"Listbox.Listbox"},{"name":"label","comment":" ","type":"String.String -> Listbox.Label"},{"name":"labelledBy","comment":" ","type":"String.String -> Listbox.Label"},{"name":"noLabel","comment":" ","type":"Listbox.Label"},{"name":"noTypeAhead","comment":" Use this inside `Behaviour` if you do not want to activate the type-ahead\nfunctionality.\n","type":"Listbox.TypeAhead a"},{"name":"preventDefaultOnKeyDown","comment":" This adds all the keydown event listener needed for the listbox on any DOM\nnode. For example, this could be an input field which keeps focused while the\nlistbox is displayed in a dropdown. You usually want to set `focusable = False`\ninside the `ViewConfig` when using this event listener.\n\nYou must provide your own event decoder, which is tried **before** the\nlistbox's event decoder. This lets you prevent the listbox reacting on key\ncombinations. If you do not need to handle keydown events, just insert a failing decoder:\n\n    view =\n        Html.input\n            [ Html.Events.preventDefaultOn \"keydown\"\n                (preventDefaultOnKeyDown\n                    { id = \"fruits-listbox\"\n                    , labelledBy = \"fruits\"\n                    , lift = ListboxMsg\n                    }\n                    (Decode.fail \"not handling this event here\")\n                )\n            ]\n            []\n\nIn this example, pressing keys like `ArrowUp` and `ArrowDown` will adjust the\nlistbox's focus although the listbox itself is not focused.\n\n","type":"Listbox.Instance a msg -> Json.Decode.Decoder ( msg, Basics.Bool ) -> Json.Decode.Decoder ( msg, Basics.Bool )"},{"name":"scrollToFocus","comment":" A command adjusting the scroll position of the listbox such that the\ncurrent keyboard focus is visible.\n","type":"Listbox.Behaviour a -> Listbox.Instance a msg -> Listbox.Listbox -> Platform.Cmd.Cmd msg"},{"name":"simpleTypeAhead","comment":" Activate the type-ahead functionality. When the user types in a search\nquery.\n\n  - The first argument is the timeout (in milliseconds) after which the query\n    is reseted.\n\n  - The second argument, `a -> String`, should be a reasonable stringification\n    of the options. It is used to check whether an option starts with this query\n    or not. The listbox will then move the keyboard focus forward to the next\n    matching option.\n\n","type":"Basics.Int -> (a -> String.String) -> Listbox.TypeAhead a"},{"name":"subscriptions","comment":" Do not forget to add this to your subscriptions:\n\n    subscriptions model =\n        Sub.map ListboxMsg\n            (Listbox.subscriptions model.listbox)\n\n","type":"Listbox.Listbox -> Platform.Sub.Sub (Listbox.Msg a)"},{"name":"typeAhead","comment":" This works like `simpleTypeAhead` but gives you you more flexibility when\ncustomizing the matching condition. The first argument is the timeout. The\nsecond argument is a function which gets the current query and an option,\nreturning if the query matches this option.\n","type":"Basics.Int -> (String.String -> a -> Basics.Bool) -> Listbox.TypeAhead a"},{"name":"update","comment":" Use this function to update the listbox state. You have to provide the same\nentries and selection as given to your view function.\n\nFor example:\n\n    update msg model =\n        case msg of\n            ListboxMsg listboxMsg ->\n                let\n                    ( newListbox, listboxCmd, newSelection ) =\n                        Listbox.update updateConfig\n                            entries\n                            listboxMsg\n                            model.listbox\n                            model.selection\n                in\n                ( { model\n                    | listbox = newListbox\n                    , selection = newSelection\n                  }\n                , Cmd.map ListboxMsg listboxCmd\n                )\n\nIn a more sophisticated example, the entries could be dynamic, as well. (For\nexample, loaded via an HTTP request.)\n\nYou can provide the following customizations:\n\n  - **uniqueId**: A hash function for the entries.\n\n  - **behaviour**: Behaviour customizations.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Msg a -> Listbox.Listbox -> List.List a -> ( Listbox.Listbox, Platform.Cmd.Cmd (Listbox.Msg a), List.List a )"},{"name":"updateUnique","comment":" Use this function instead of `update` if the user can only\nselect **at most one** entry in the listbox. The only difference between the\ntype signature of this function and the one of `update` is that the last\nargument is a `Maybe a` instead of a `List a`.\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Behaviour a } -> List.List a -> Listbox.Msg a -> Listbox.Listbox -> Maybe.Maybe a -> ( Listbox.Listbox, Platform.Cmd.Cmd (Listbox.Msg a), Maybe.Maybe a )"},{"name":"view","comment":" Take a list of all entries and a list of selected options and display it as\na listbox. You have to provide a `ViewConfig` for the styling and an `Instance`\nto uniquely identify this listbox. For example:\n\n    view : Listbox -> List String -> Html Msg\n    view listbox selection =\n        Html.div []\n            [ Listbox.view viewConfig\n                { id = \"fruits-listbox\"\n                , label = label \"fruits\"\n                , lift = ListboxMsg\n                }\n                fruits\n                listbox\n                selection\n            ]\n\n    fruits : List (Entry String divider)\n    fruits =\n        List.map Listbox.option\n            [ \"Apple\", \"Banana\", \"Cherry\" ]\n\n    type Msg\n        = ListboxMsg Listbox.Msg\n\nYou can provide the following options:\n\n  - **uniqueId**: A hash function for the entries.\n\n  - **focusable**: Should the listbox be focusable?\n\n","type":"Listbox.Views a node msg -> { uniqueId : a -> String.String, focusable : Basics.Bool, markActiveDescendant : Basics.Bool } -> Listbox.Instance a msg -> List.List a -> Listbox.Listbox -> List.List a -> node"},{"name":"viewUnique","comment":" Use this instead of `view` if the user can only select **at\nmost one** entry in the listbox. The only difference between the type signature\nof this function and the one of `view` is that the last argument is a `Maybe a`\ninstead of a `List a`.\n","type":"Listbox.Views a node msg -> { uniqueId : a -> String.String, focusable : Basics.Bool, markActiveDescendant : Basics.Bool } -> Listbox.Instance a msg -> List.List a -> Listbox.Listbox -> Maybe.Maybe a -> node"}],"binops":[]},{"name":"Listbox.Combobox","comment":" Implementation of the [combobox\nwidget](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox):\n\n> A combobox is a widget made up of the combination of two distinct elements:\n>\n> 1.  a single-line textbox, and\n> 2.  an associated pop-up element for helping users set the value of the textbox.\n\nIn this module the pop-up is a listbox. Take a look at the documentation of\n`Behaviour` for the default keyboard interactions this widget offers.\n\n\n# View\n\n@docs view, Instance\n\n\n# State\n\n@docs Combobox, init\n\n\n# Update\n\n@docs update, Msg, subscriptions\n\n\n# Configuration\n\n\n## Update\n\n@docs UpdateConfig, updateConfig, Behaviour\n\n\n## View\n\n@docs ViewConfig, viewConfig, Role, Visibility, Views\n\n\n## Using different DOM libraries\n\nYou can use these functions if you want to use other DOM libraries, like for\nexample `rtfeldman/elm-css` or `mdgriffith/elm-ui`.\n\n@docs customView\n\n@docs CustomViewConfig, customViewConfig, CustomVisibility\n\n","unions":[{"name":"Combobox","comment":" Tracks the keyboard and mouse focus in the pop-up. The value of the textbox\nas well as the (filtered) list of entries live in your own model.\n","args":["a"],"cases":[]},{"name":"CustomViewConfig","comment":" ","args":["a"],"cases":[]},{"name":"CustomVisibility","comment":" ","args":[],"cases":[["CustomAlways",[]],["CustomSometimes",["{ whenMatchingWithMinimalValueLength : Maybe.Maybe Basics.Int, whenRequested : Maybe.Maybe { checkValue : String.String -> Basics.Bool } }"]]]},{"name":"Msg","comment":" The combobox's message type.\n","args":["a"],"cases":[]},{"name":"Role","comment":" The textbox of the combobox can have one of these two roles.\n","args":[],"cases":[["Textbox",[]],["Searchbox",[]]]},{"name":"UpdateConfig","comment":" ","args":["a"],"cases":[]},{"name":"ViewConfig","comment":" ","args":["a"],"cases":[]},{"name":"Views","comment":" **Available view customizations**\n\nThis is part of the arguments to `viewConfig`. You can customize the styling\nwith the following fields:\n\n  - **container**: A list of html attributes applied to the container div which\n    holds the combobox.\n\n  - **input**: A list of html attributes applied to the textbox.\n\n  - **ul**: A list of html attributes applied to the pop-up listbox.\n\n  - **liOption**: A function returning `HtmlDetails` for each option in your\n    entries list. It gets the actual option value `a` and flags telling you if\n    this option is currently `selected`, `focused` or `hovered`. If the user\n    typed in a query, you get this via the `maybeQuery` field.\n\nThe DOM structure of a combobox with visible pop-up will be something like\nthis:\n\n    comboboxOpen =\n        Html.div\n            [ ... ] -- container attributes\n            [ Html.input\n                [ ... ] -- input attributes\n                []\n            , Html.ul\n                [ ... ] -- ul attributes\n                [ Html.li\n                    [ ... ] -- liOption attributes\n                    [ ... ] -- liOption children\n                , ...\n                , Html.li\n                    [ ... ] -- liOption attributes\n                    [ ... ] -- liOption children\n                ]\n            ]\n\nWhen the pop-up is not visible, it will look like this:\n\n    comboboxClosed =\n        Html.div\n            [ ... ] -- container attributes\n            [ Html.input\n                [ ... ] -- input attributes\n                []\n            ]\n\nProvided you have specified some CSS classes, a view configuration could look\nlike this:\n\n    views : Views String Never\n    views =\n        { container =\n            [ Html.Attributes.class \"combobox__container\" ]\n        , input = [ Html.Attributes.class \"combobox__input\" ]\n        , ul = [ Html.Attributes.class \"listbox__container\" ]\n        , liOption =\n            \\{ selected, focused } option ->\n                { attributes =\n                    [ Html.Attributes.class \"listbox__option\"\n                    , Html.Attributes.classList\n                        [ ( \"listbox__option--selected\"\n                          , selected\n                          )\n                        , ( \"listbox__option--keyboardFocused\"\n                          , focused\n                          )\n                        ]\n                    ]\n                , children =\n                    [ Html.text option ]\n                }\n        }\n\n","args":["a","node","msg"],"cases":[]},{"name":"Visibility","comment":" Provided the list of entries is not empty, when should the pop-up be\nvisible? Either `Always` or `Sometimes` when at least one of the following\nconditions are met:\n\n  - **whenMatchingWithMinimalValueLength**: The value has a minimum length.\n\n  - **whenRequested**: The display was explicitely requested by the user, for\n    example by pressing `Alt + Down`. Also, `checkValue` which is given the\n    current value, must evaluate to `True`.\n\n","args":[],"cases":[["Always",[]],["Sometimes",["{ whenMatchingWithMinimalValueLength : Maybe.Maybe Basics.Int, whenRequested : Maybe.Maybe { checkValue : String.String -> Basics.Bool } }"]]]}],"aliases":[{"name":"Behaviour","comment":" **Available behaviour customizations**\n\nYou can customize the behaviour of the combobox with the following options:\n\n  - **entryToValue**: How to transform an entry into a `String`. This will be\n    the new value when an entry gets selected in the listbox.\n\n  - **clearOnEscape**: Should the textbox be cleared when the pop-up is\n    dismissed by pressing Escape?\n\n  - **separateFocus**: Whether the mouse focus and the keyboard focus can be\n    different.\n\n  - **handleHomeAndEnd**: Should we handle the `Home` and `End` keys (to jump\n    to the top or bottom of the list)?\n\n  - **minimalGap**: If the distance (in px) of the option having the keyboard\n    focus to the borders of the listbox's viewport is smaller then this value,\n    the listbox will adjust its scroll position so that this distance is at least\n    `initialGap`.\n\n  - **initialGap**: The minimal distance (in px) of the option having the\n    keyboard focus to the borders of the listbox's viewport after the scroll\n    position has been adjusted.\n\nA behaviour configuration could look something like this:\n\n    behaviour : Behaviour String\n    behaviour =\n        { entryToValue = identity\n        , clearOnEscape = False\n        , separateFocus = True\n        , handleHomeAndEnd = True\n        , minimalGap = 30\n        , initialGap = 200\n        }\n\nThe listbox will behave as explained in the [WAI-ARIA Authoring Practices\n1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox) in the _Keyboard\nInteraction_ section.\n\n","args":["a"],"type":"{ entryToValue : a -> String.String, clearOnEscape : Basics.Bool, separateFocus : Basics.Bool, handleHomeAndEnd : Basics.Bool, minimalGap : Basics.Float, initialGap : Basics.Float }"},{"name":"Instance","comment":" To make a listbox unique in your application you have to provide this\ninformation to the `view` function:\n\n  - **id**: The unique id of the listbox.\n\n  - **label**: Specify how the combobox is labelled. See `Label` for\n    possible options.\n\n  - **lift**: Your message type constructor wrapping the listbox `Msg`'s.\n\n","args":["a","msg"],"type":"{ id : String.String, label : Internal.Label.Label, lift : Listbox.Combobox.Msg a -> msg }"}],"values":[{"name":"customView","comment":" Create a customized view function for the DOM library of your choice by\nproviding some `DomFunctions`.\n","type":"Listbox.Combobox.CustomViewConfig a -> Listbox.Combobox.Views a node msg -> Listbox.Combobox.Instance a msg -> List.List a -> Listbox.Combobox.Combobox a -> String.String -> node"},{"name":"customViewConfig","comment":" A replacement for `viewConfig` when you are using your own `customView`\nfunction.\n","type":"{ uniqueId : a -> String.String, role : Listbox.Combobox.Role, visibility : Listbox.Combobox.CustomVisibility } -> Listbox.Combobox.CustomViewConfig a"},{"name":"init","comment":" An initial combobox with no option focused.\n","type":"Listbox.Combobox.Combobox a"},{"name":"subscriptions","comment":" Do not forget to add this to your subscriptions:\n\n    subscriptions model =\n        Sub.map ComboboxMsg\n            (Combobox.subscriptions model.combobox)\n\n","type":"Listbox.Combobox.Combobox a -> Platform.Sub.Sub (Listbox.Combobox.Msg a)"},{"name":"update","comment":" Use this function to update the combobox state. You have to provide the\nsame entries and value as given to your view function. Note, that you have to\nfilter the entries yourself.\n\nFor example:\n\n    update msg model =\n        case msg of\n            ComboboxMsg comboboxMsg ->\n                let\n                    ( newCombobox, comboboxCmd, newValue ) =\n                        Combobox.update updateConfig\n                            matchingFruits\n                            comboboxMsg\n                            model.combobox\n                            model.value\n\n                    matchingFruits =\n                        fruits\n                            |> List.filter\n                                (String.contains model.value)\n                            |> List.map Listbox.option\n                in\n                ( { model\n                    | combobox = newCombobox\n                    , value = newValue\n                  }\n                , Cmd.map ComboboxMsg comboboxCmd\n                )\n\nIn a more sophisticated example, the entries could be dynamic, as well. (For\nexample, loaded via an HTTP request.)\n\n","type":"Listbox.Combobox.UpdateConfig a -> List.List a -> Listbox.Combobox.Msg a -> Listbox.Combobox.Combobox a -> String.String -> ( Listbox.Combobox.Combobox a, Platform.Cmd.Cmd (Listbox.Combobox.Msg a), String.String )"},{"name":"updateConfig","comment":" Generate an `UpdateConfig` by providing the following:\n\n  - **uniqueId**: A hash function for the entries.\n\n  - **behaviour**: Behaviour customizations.\n\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Combobox.Behaviour a } -> Listbox.Combobox.UpdateConfig a"},{"name":"view","comment":" Take a list of all entries and the value of the textbox and display it as\na combobox. Note, that you have to filter the entries yourself. You have to\nprovide a `ViewConfig` for the styling and an `Instance` to uniquely identify\nthis combobox. For example:\n\n    view : Combobox -> String -> Html Msg\n    view combobox value =\n        let\n            matchingFruits =\n                fruits\n                    |> List.filter (String.contains value)\n                    |> List.map Listbox.option\n        in\n        Html.div []\n            [ Combobox.view viewConfig\n                { id = \"fruits-combobox\"\n                , label = label \"fruits\"\n                , lift = ComboboxMsg\n                }\n                matchingFruits\n                combobox\n                value\n            ]\n\n    fruits : List String\n    fruits =\n        [ \"Apple\", \"Banana\", \"Cherry\" ]\n\n    type Msg\n        = ComboboxMsg Combobox.Msg\n\n","type":"Listbox.Combobox.ViewConfig a -> Listbox.Combobox.Views a node msg -> Listbox.Combobox.Instance a msg -> List.List a -> Listbox.Combobox.Combobox a -> String.String -> node"},{"name":"viewConfig","comment":" Generate a `ViewConfig` by providing the following:\n\n  - **uniqueId**: A hash function for the entries.\n\n  - **role**: The role of the textbox.\n\n  - **visibility**: When should the pop-up be displayed?\n\n  - **views**: View customizations.\n\n","type":"{ uniqueId : a -> String.String, role : Listbox.Combobox.Role, visibility : Listbox.Combobox.Visibility } -> Listbox.Combobox.ViewConfig a"}],"binops":[]},{"name":"Listbox.Dropdown","comment":" This is a collapsible dropdown version of `Listbox`. The behaviour\nis based on the [Collapsible Dropdown Listbox\nExample](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html).\n\n\n# View\n\n@docs view, Instance\n\n\n# State\n\n@docs Dropdown, init\n\n\n# Update\n\n@docs update, Msg, subscriptions\n\n\n# Configuration\n\n@docs UpdateConfig, updateConfig, Behaviour\n\n@docs ViewConfig, viewConfig, Views\n\n\n# Using different DOM libraries\n\n@docs customView\n\n@docs CustomViewConfig, customViewConfig\n\n","unions":[{"name":"CustomViewConfig","comment":" ","args":["a"],"cases":[["CustomViewConfig",["a -> String.String"]]]},{"name":"Dropdown","comment":" Tracks the keyboard and mouse focus as well as the current query and\nwhether the dropdown is open or closed. The full list of entries and the\ncurrently selected option(s) live in your own model.\n","args":[],"cases":[]},{"name":"Msg","comment":" The dropdown's message type.\n","args":["a"],"cases":[]},{"name":"UpdateConfig","comment":" ","args":["a"],"cases":[]},{"name":"ViewConfig","comment":" ","args":["a"],"cases":[]},{"name":"Views","comment":" **Available view customizations**\n\nThis is the second argument to `viewConfig`. You can customize the styling with\nthe following fields:\n\n  - **container**: A list of html attributes applied to the container div which\n    holds the button and the listbox.\n\n  - **button**: A function which returns `HtmlDetails` for the button which\n    shows the current selection and toggles the visibility of the listbox. The\n    function gets as arguments the current selection and whether the listbox is\n    visible or not.\n\n  - **ul**: A list of html attributes applied to the outer listbox.\n\n  - **liOption**: A function which returns `HtmlDetails` for each option in\n    your entries list. It gets the actual option value `a` and flags telling you\n    if this option is currently `selected` or has focus (`keyboardFocus` and\n    `mouseFocus`). If the user typed in a query, you get this via the\n    `maybeQuery` field.\n\nThe DOM structure of a dropdown will be something like this:\n\n    listbox =\n        Html.div\n            [ ... ] -- container attributes\n            [ Html.button\n                [ ... ] -- button attributes\n            , Html.ul\n                [ ... ] -- ul attributes\n                [ Html.li\n                    [ ... ] -- liOption attributes\n                    [ ... ] -- liOption children\n                , ...\n                , Html.li\n                    [ ... ] -- liOption attributes\n                    [ ... ] -- liOption children\n                ]\n            ]\n\nProvided you have specified some CSS classes, a view configuration could look\nlike this:\n\n    views : Views String Never\n    views =\n        { container = [ Html.Attributes.class \"dropdown__container\" ]\n        , button =\n            \\{ maybeSelection } ->\n                { attributes =\n                    [ Html.Attributes.class \"dropdown__button\" ]\n                , children =\n                    [ Html.text <|\n                        Maybe.withDefault \"Make a selection..\"\n                            maybeSelection\n                    ]\n                }\n        , ul = [ Html.Attributes.class \"listbox__container\" ]\n        , liOption =\n            \\{ selected, focused } option ->\n                { attributes =\n                    [ Html.Attributes.class \"listbox__option\"\n                    , Html.Attributes.classList\n                        [ ( \"listbox__option--selected\"\n                          , selected\n                          )\n                        , ( \"listbox__option--keyboardFocused\"\n                          , focused\n                          )\n                        ]\n                    ]\n                , children =\n                    [ Html.text option ]\n                }\n        }\n\n","args":["a","node","msg"],"cases":[]}],"aliases":[{"name":"Behaviour","comment":" **Available behaviour customizations**\n\nYou can customize the behaviour of the dropdown with the following options:\n\n  - **jumpAtEnds**: Should the keyboard focus jump to the other end of the list\n    when pressing `ArrowUp` while focusing the first option (or `ArrowDown` while\n    focusing the last).\n\n  - **closeAfterMouseSelection**: Should the dropdown be hidden after the user\n    selected an option with the mouse?\n\n  - **separateFocus**: Whether the mouse focus and the keyboard focus can be\n    different.\n\n  - **selectionFollowsFocus**: Do we automatically select the entry gaining\n    keyboard focus?\n\n  - **handleHomeAndEnd**: Should we handle the `Home` and `End` keys (to jump\n    to the top or bottom of the list)?\n\n  - **typeAhead**: Make it possible to jump to options by typing in a query.\n    Take a look at `TypeAhead` for more information.\n\n  - **minimalGap**: If the distance (in px) of the option having the keyboard\n    focus to the borders of the listbox scene is smaller then this value, the\n    listbox will adjust its scroll position so that this distance is at least\n    `initialGap`.\n\n  - **initialGap**: The minimal distance (in px) of the option having the\n    keyboard focus to the borders of the listbox scene after the scroll position\n    has been adjusted.\n\nA behaviour configuration could look something like this:\n\n    behaviour : Behaviour String\n    behaviour =\n        { jumpAtEnds = True\n        , closeAfterMouseSelection = False\n        , separateFocus = True\n        , selectionFollowsFocus = False\n        , handleHomeAndEnd = True\n        , typeAhead = simpleTypeAhead 300 identity\n        , minimalGap = 30\n        , initialGap = 200\n        }\n\nThe dropdown will behave as explained in the [WAI-ARIA Authoring Practices\n1.1](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html)\nin the section _Keyboard Support_.\n\n","args":["a"],"type":"{ jumpAtEnds : Basics.Bool, closeAfterMouseSelection : Basics.Bool, separateFocus : Basics.Bool, selectionFollowsFocus : Basics.Bool, handleHomeAndEnd : Basics.Bool, typeAhead : Listbox.TypeAhead a, minimalGap : Basics.Float, initialGap : Basics.Float }"},{"name":"Instance","comment":" To make a dropdown listbox unique in your application you have to provide\nthis information to the `view` function:\n\n  - **id**: The unique id of the listbox.\n\n  - **label**: Specify how the dropdown listbox is labelled. See `Label` for\n    possible options.\n\n","args":["msg","a"],"type":"{ id : String.String, label : Internal.Label.Label, lift : Listbox.Dropdown.Msg a -> msg }"}],"values":[{"name":"customView","comment":" Create a customized view function for the DOM library of your choice by\nproviding some `DomFunctions`.\n","type":"Listbox.Dropdown.Views a node msg -> Listbox.Dropdown.CustomViewConfig a -> Listbox.Dropdown.Instance msg a -> List.List a -> Listbox.Dropdown.Dropdown -> Maybe.Maybe a -> node"},{"name":"customViewConfig","comment":" A replacement for `Views` when you are using your own `customView`\nfunction. Take a look at its documentation for a description of each field.\n","type":"(a -> String.String) -> Listbox.Dropdown.CustomViewConfig a"},{"name":"init","comment":" An initial dropdown with no option focused, and which is closed.\n","type":"Listbox.Dropdown.Dropdown"},{"name":"subscriptions","comment":" Do not forget to add this to your subscriptions:\n\n    subscriptions model =\n        Sub.map DropdownMsg\n            (Listbox.Dropdown.subscriptions model.dropdown)\n\n","type":"Listbox.Dropdown.Dropdown -> Platform.Sub.Sub (Listbox.Dropdown.Msg a)"},{"name":"update","comment":" Use this function to update the dropdown state. You have to provide the\nsame entries and selection as to your view function.\n\nFor example:\n\n    update msg model =\n        case msg of\n            DropdownMsg dropdownMsg ->\n                let\n                    ( newDropdown, dropdownCmd, newSelection ) =\n                        Listbox.Dropdown.update updateConfig\n                            entries\n                            dropdownMsg\n                            model.dropdown\n                            model.selection\n                in\n                ( { model\n                    | dropdown = newDropdown\n                    , selection = newSelection\n                  }\n                , Cmd.map DropdownMsg dropdownCmd\n                )\n\nIn a more sofisticated example, the entries could be dynamic, as well. (For\nexample, loaded via an HTTP request.)\n\n","type":"Listbox.Dropdown.UpdateConfig a -> List.List a -> Listbox.Dropdown.Msg a -> Listbox.Dropdown.Dropdown -> Maybe.Maybe a -> ( Listbox.Dropdown.Dropdown, Platform.Cmd.Cmd (Listbox.Dropdown.Msg a), Maybe.Maybe a )"},{"name":"updateConfig","comment":" Generate an `UpdateConfig` by providing a hash function for the entries and\na `Behaviour` record.\n","type":"{ uniqueId : a -> String.String, behaviour : Listbox.Dropdown.Behaviour a } -> Listbox.Dropdown.UpdateConfig a"},{"name":"view","comment":" Take a list of all entries and a list of selected options and display it as\na dropdown. You have to provide a `ViewConfig` for the styling and an\n`Instance` to uniquely identify this listbox. For example:\n\n    view : Dropdown -> Maybe String -> Html Msg\n    view dropdown selection =\n        Html.div []\n            [ Html.map DropdownMsg <|\n                Listbox.Dropdown.view viewConfig\n                    { id = \"fruits-dropdown\"\n                    , labelledBy = \"fruits\"\n                    }\n                    fruits\n                    dropdown\n                    selection\n            ]\n\n    fruits : List (Entry String divider)\n    fruits =\n        List.map Listbox.option\n            [ \"Apple\", \"Banana\", \"Cherry\" ]\n\n    type Msg\n        = DropdownMsg Listbox.Dropdown.Msg\n\n","type":"Listbox.Dropdown.Views a node msg -> Listbox.Dropdown.ViewConfig a -> Listbox.Dropdown.Instance msg a -> List.List a -> Listbox.Dropdown.Dropdown -> Maybe.Maybe a -> node"},{"name":"viewConfig","comment":" Generate a `ViewConfig` by providing the following:\n\n  - **uniqueId**: A hash function for the entries.\n\n  - **views**: View customizations.\n\nYou usually do **not** want to store this inside your model.\n\n","type":"{ uniqueId : a -> String.String } -> Listbox.Dropdown.ViewConfig a"}],"binops":[]}]