[{"name":"Select","comment":" Select items from a drop-down list.\n\n\n# Set up\n\n@docs State, MenuItem, Action, initState, Msg, menuItems, placeholder, selectIdentifier, state, update, view\n\n\n# Single select\n\n@docs single, clearable\n\n\n# Multi select\n\n@docs multi, truncateMultiTag, multiTagColor, initMultiConfig\n\n\n# Common\n\n@docs disabled, jsOptimize, labelledBy, loading\n\n","unions":[{"name":"Action","comment":" The select actions that your program can react to.\n\nInputChange -> The value of the input has changed\n\nSelect -> There has been a selection of a [`MenuItem`](#MenuItem)\n\nDeselectMulti -> A [`multi`](#multi) variant selected tag has been deselected\n\nClearSingleSelectItem -> A [`single`](#single) variant selected menu item has been deselected\n\n","args":["item"],"cases":[["InputChange",["String.String"]],["Select",["item"]],["DeselectMulti",["item"]],["ClearSingleSelectItem",[]]]},{"name":"Msg","comment":" ","args":["item"],"cases":[]},{"name":"State","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"MenuItem","comment":" The list item that will be represented in the list-box.\n\nThe `item` property is the value representation of the list-box item that will be used in an Action.\n\nThe `label` is the text representation that will be shown in the drop-down list.\n\n    type Tool\n        = Screwdriver\n        | Hammer\n        | Drill\n\n    toolItems : MenuItem Tool\n    toolItems =\n        [ { item = Screwdriver, label = \"Screwdriver\" }\n        , { item = Hammer, label = \"Hammer\" }\n        , { item = Drill, label = \"Drill\" }\n        ]\n\n    yourView model =\n        view\n            (single Nothing\n                |> menuItems toolItems\n                |> state model.selectState\n            )\n            (selectIdentifier \"SingleSelectExample\")\n\n","args":["item"],"type":"{ item : item, label : String.String }"}],"values":[{"name":"clearable","comment":" Allows a ['single'](#single) variant selected menu item to be deselected.\n\n        yourView model =\n            view\n                (single Nothing |> clearable True)\n                (selectIdentifier \"SingleSelectExample\")\n\n","type":"Basics.Bool -> Select.Config item -> Select.Config item"},{"name":"disabled","comment":" Disable the the select input\n\n        yourView model =\n            view\n                (single Nothing |> disabled True)\n                (selectIdentifier \"SingleSelectExample\")\n\n","type":"Basics.Bool -> Select.Config item -> Select.Config item"},{"name":"initMultiConfig","comment":" Starting value for the ['multi'](*multi) variant.\n\n        yourView model =\n            view\n                (multi initMultiConfig)\n                (selectIdentifier \"1234\")\n\n","type":"Select.MultiSelectConfig"},{"name":"initState","comment":" An initial state for the State type.\n","type":"Select.State"},{"name":"jsOptimize","comment":" Opt in to JS optimizations for the best performance.\n\n        model : Model model =\n            { selectState = initState |> jsOptimize True }\n\nInstall the JS package:\n\n**npm**\n\n> `npm install @confidenceman02/elm-select`\n\n**github packages**\n\nadd to projects `.npmrc`\n\n    @confidenceman02:registry=<https://npm.pkg.github.com/>\n\ninstall\n\n> `npm install @confidenceman02/elm-select`\n\n**Import script**\n\nIn the Elm init file\n\n    import { Elm } from \"./src/Main\";\n    import \"@confidenceman02/elm-select/dynamic\"\n\n    Elm.Main.init({node, flags})\n\nAlternatively, you can import the minified JS in the index.html file\n\n        <!DOCTYPE html>\n        <html>\n          <head>\n            <meta charset=\"utf-8\">\n            <title>Viewer</title>\n\n            <script src=\"/node_modules/@confidenceman02/elm-select/dist/dynamic.min.js\"></script>\n          </head>\n          <body>\n            <main></main>\n            <script src=\"index.js\"></script>\n          </body>\n        </html>\n\n","type":"Basics.Bool -> Select.State -> Select.State"},{"name":"labelledBy","comment":" The ID for the label that describes the select.\nIt is best practice to render the select with a label.\n\n        yourView model =\n            view\n                (single Nothing |> labelledBy \"selectLabelId\")\n                (selectIdentifier \"SingleSelectExample\")\n\n","type":"String.String -> Select.Config item -> Select.Config item"},{"name":"loading","comment":" Displays the animated loading icon.\nThis would be useful if you are loading menu options asynchronously, like from a server.\n\n        yourView model =\n            view\n                (single Nothing |> loading True)\n                (selectIdentifier \"SingleSelectExample\")\n\n","type":"Basics.Bool -> Select.Config item -> Select.Config item"},{"name":"menuItems","comment":" The items that will appear in the menu list.\n\nNOTE: When using the Multi select variant, selected items will be visually removed\nfrom the menu list.\n\n      items =\n          [ { item = SomeValue, label = \"Some label\" } ]\n\n      yourView =\n          view\n              (Single Nothing |> menuItems items)\n              (selectIdentifier \"1234\")\n\n","type":"List.List (Select.MenuItem item) -> Select.Config item -> Select.Config item"},{"name":"multi","comment":" Select multiple items.\n\n    yourView model =\n        view\n            (multi initMultiConfig [])\n            (selectIdentifier \"1234\")\n\n","type":"Select.MultiSelectConfig -> List.List (Select.MenuItem item) -> Select.Config item"},{"name":"multiTagColor","comment":" Set the color for the multi select tag.\n\n        yourView =\n            view\n                (multi (initMultiConfig |> multiTagColor (Css.hex \"#E1E2EA\") [])\n                (selectIdentifier \"1234\")\n\n","type":"Css.Color -> Select.MultiSelectConfig -> Select.MultiSelectConfig"},{"name":"placeholder","comment":" The text that will appear as an input placeholder.\n\n        yourView model =\n            view\n                (single Nothing |> placeholder \"some placeholder\")\n                (selectIdentifier \"1234\")\n\n","type":"String.String -> Select.Config item -> Select.Config item"},{"name":"selectIdentifier","comment":" The ID for the rendered Select input\n\nNOTE: It is important that the ID's of all selects that exist on\na page remain unique.\n\n    yourView model =\n        view\n            (single Nothing)\n            (selectIdentifier \"someUniqueId\")\n\n","type":"String.String -> Select.SelectId"},{"name":"single","comment":" Select a single item.\n","type":"Maybe.Maybe (Select.MenuItem item) -> Select.Config item"},{"name":"state","comment":" Sets the state value.\n\nShould be a persisted value that lives in your model.\n\n        model : Model\n        model =\n            { selectState = initState }\n\n        yourView : Model\n        yourView model =\n            view\n                (single Nothing |> state model.selectState)\n                (selectIdentifier \"1234\")\n\n","type":"Select.State -> Select.Config item -> Select.Config item"},{"name":"truncateMultiTag","comment":" Limit the width of a multi select tag.\n\nHandy for when the selected item text is excessively long.\nText that breaches the set width will display as an ellipses.\n\nWidth will be in px values.\n\n        yourView model =\n            view\n                (multi (initMultiConfig |> truncateMultitag 30) [])\n                (selectIdentifier \"1234\")\n\n","type":"Basics.Float -> Select.MultiSelectConfig -> Select.MultiSelectConfig"},{"name":"update","comment":" Handle all Msg events\n\n    yourUpdate msg model =\n        case msg of\n            SelectMsg selectMsg ->\n                update selectMsg model.selectState\n\n","type":"Select.Msg item -> Select.State -> ( Maybe.Maybe (Select.Action item), Select.State, Platform.Cmd.Cmd (Select.Msg item) )"},{"name":"view","comment":" Renders the select\n\n        yourView model =\n            view\n                (single Nothing)\n                (selectIdentifier \"SingleSelectExample\")\n\n","type":"Select.Config item -> Select.SelectId -> Html.Styled.Html (Select.Msg item)"}],"binops":[]}]