{ "name": "Mapbox_Directions_API", "components": [ { "name": "/App", "graph": { "connections": [ { "fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "fromProperty": "map", "toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "toProperty": "Map" }, { "fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "fromProperty": "mapLoaded", "toId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "toProperty": "Mount Click Event" }, { "fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "fromProperty": "map", "toId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "toProperty": "Mapbox Object" }, { "fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "fromProperty": "Clicked", "toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "toProperty": "CreateRoute" }, { "fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "fromProperty": "Clicked Longitude", "toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "toProperty": "endLongitude" }, { "fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "fromProperty": "Clicked Latitute", "toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "toProperty": "endLatitute" }, { "fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "fromProperty": "Steps", "toId": "174b3737-1001-d28b-6a1f-8525d14d7565", "toProperty": "items" }, { "fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "fromProperty": "Duration", "toId": "5ce50c95-dabc-3b92-5523-4d7f42517223", "toProperty": "duration" }, { "fromId": "5ce50c95-dabc-3b92-5523-4d7f42517223", "fromProperty": "formatted", "toId": "2bf1c283-6ae9-49cc-a8f0-18b960f07325", "toProperty": "text" }, { "fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "fromProperty": "Steps", "toId": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44", "toProperty": "value" }, { "fromId": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44", "fromProperty": "result", "toId": "78d38c66-9b68-4a66-c6a0-a34fd5e1038a", "toProperty": "visible" } ], "roots": [ { "id": "246f9453-a119-ac78-171e-3806cf596ecc", "type": "Group", "x": -111.4681915301291, "y": 311.4376377651178, "parameters": { "backgroundColor": "#FFFFFF" }, "ports": [], "dynamicports": [], "children": [ { "id": "5888a1a4-10b7-c0dd-a5c4-10a31654434c", "type": "Mapbox Map", "parameters": { "longitude": 13.00051400697093, "zoom": 14, "latitute": 55.59900890612954 }, "ports": [], "dynamicports": [], "children": [] }, { "id": "78d38c66-9b68-4a66-c6a0-a34fd5e1038a", "type": "Group", "parameters": { "position": "absolute", "marginTop": { "value": 8, "unit": "px" }, "marginLeft": { "value": 8, "unit": "px" }, "backgroundColor": "#FFFFFF", "sizeMode": "contentSize", "paddingLeft": { "value": 8, "unit": "px" }, "paddingTop": { "value": 8, "unit": "px" }, "paddingRight": { "value": 8, "unit": "px" }, "paddingBottom": { "value": 8, "unit": "px" } }, "ports": [], "dynamicports": [], "children": [ { "id": "2bf1c283-6ae9-49cc-a8f0-18b960f07325", "type": "Text", "parameters": {}, "ports": [], "dynamicports": [], "children": [] }, { "id": "174b3737-1001-d28b-6a1f-8525d14d7565", "type": "For Each", "parameters": { "template": "/Step Item" }, "ports": [], "dynamicports": [ { "name": "inputMappingScript", "type": { "name": "string", "codeeditor": "javascript" }, "displayName": "Script", "group": "Input Mapping", "default": "// Here you add mappings between the properties of the item objects and the inputs of the components.\n// 'myComponentInput': 'myObjectProperty',\n// 'anotherComponentInput': function () { return object.get('someProperty') + ' ' + object.get('otherProp') }\n// These are the default mappings based on the selected template component.\nmap({\n\t'maneuver': 'maneuver',\n})\n", "plug": "input", "index": 6 } ], "children": [] } ] } ] }, { "id": "0a1bfe24-ad9d-3116-4718-819d8a4902bf", "type": "Javascript2", "label": "Create Route", "x": 508.53180846987084, "y": 297.4376377651178, "parameters": { "code": "// This function makes a Mapbox Directions API request\nasync function getRoute(map, start, end) {\n const accessToken = Noodl.getProjectSettings().mapboxAccessToken;\n\n // make a directions request using cycling profile\n // an arbitrary start will always be the same\n // only the end or destination will change\n const query = await fetch(\n `https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${accessToken}`,\n { method: \"GET\" }\n );\n const json = await query.json();\n const data = json.routes[0];\n const route = data.geometry.coordinates;\n const geojson = {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"LineString\",\n coordinates: route,\n },\n };\n // if the route already exists on the map, we'll reset it using setData\n if (map.getSource(\"route\")) {\n map.getSource(\"route\").setData(geojson);\n }\n // otherwise, we'll make a new request\n else {\n map.addLayer({\n id: \"route\",\n type: \"line\",\n source: {\n type: \"geojson\",\n data: geojson,\n },\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\",\n },\n paint: {\n \"line-color\": \"#3887be\",\n \"line-width\": 5,\n \"line-opacity\": 0.75,\n },\n });\n }\n\n return data;\n}\n\n//\n// Start of Noodl Script\n//\n\nScript.Inputs = {\n map: {\n displayName: \"Mapbox Object\",\n type: \"*\",\n },\n\n startLongitude: {\n displayName: \"Start Longitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n startLatitute: {\n displayName: \"Start Latitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n\n endLongitude: {\n displayName: \"End Longitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n endLatitute: {\n displayName: \"End Latitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n\n // You can read more about Routing profiles here:\n // https://docs.mapbox.com/api/navigation/directions/#routing-profiles\n routingProfile: {\n displayName: \"Routing Profile\",\n type: {\n name: \"enum\",\n enums: [\n {\n label: \"Driving Traffic\",\n value: \"mapbox/driving-traffic\",\n },\n {\n label: \"Driving\",\n value: \"mapbox/driving\",\n },\n {\n label: \"Walking\",\n value: \"mapbox/walking\",\n },\n {\n label: \"Cycling\",\n value: \"mapbox/cycling\",\n },\n ],\n },\n default: \"mapbox/cycling\",\n },\n};\n\nScript.Outputs = {\n Steps: \"array\",\n Duration: \"number\",\n};\n\nScript.Signals.CreateRoute = function () {\n const map = Script.Inputs.Map;\n const startCoords = [\n Script.Inputs.startLongitude,\n Script.Inputs.startLatitute,\n ];\n const endCoords = [Script.Inputs.endLongitude, Script.Inputs.endLatitute];\n\n // Add starting point to the map\n map.addLayer({\n id: \"point\",\n type: \"circle\",\n source: {\n type: \"geojson\",\n data: {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: startCoords,\n },\n },\n ],\n },\n },\n paint: {\n \"circle-radius\": 10,\n \"circle-color\": \"#3887be\",\n },\n });\n\n const endPoint = {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: endCoords,\n },\n },\n ],\n };\n\n if (map.getLayer(\"end\")) {\n map.getSource(\"end\").setData(endPoint);\n } else {\n map.addLayer({\n id: \"end\",\n type: \"circle\",\n source: {\n type: \"geojson\",\n data: {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: endCoords,\n },\n },\n ],\n },\n },\n paint: {\n \"circle-radius\": 10,\n \"circle-color\": \"#f30\",\n },\n });\n }\n\n // make an directions request that\n getRoute(map, startCoords, endCoords).then((data) => {\n // Extract the steps / instructions\n const steps = data.legs[0].steps;\n Script.Outputs.Steps = steps;\n\n Script.Outputs.Duration = Math.floor(data.duration / 60);\n });\n};\n", "startLatitute": 55.59900890612954, "startLongitude": 13.00051400697093 }, "ports": [], "dynamicports": [ { "name": "map", "plug": "input", "displayName": "Mapbox Object", "type": "*", "index": 5 }, { "name": "startLongitude", "plug": "input", "displayName": "Start Longitude", "type": "number", "group": "Coordinates", "default": 0, "index": 6 }, { "name": "startLatitute", "plug": "input", "displayName": "Start Latitude", "type": "number", "group": "Coordinates", "default": 0, "index": 7 }, { "name": "endLongitude", "plug": "input", "displayName": "End Longitude", "type": "number", "group": "Coordinates", "default": 0, "index": 8 }, { "name": "endLatitute", "plug": "input", "displayName": "End Latitude", "type": "number", "group": "Coordinates", "default": 0, "index": 9 }, { "name": "routingProfile", "plug": "input", "displayName": "Routing Profile", "type": { "name": "enum", "enums": [ { "label": "Driving Traffic", "value": "mapbox/driving-traffic" }, { "label": "Driving", "value": "mapbox/driving" }, { "label": "Walking", "value": "mapbox/walking" }, { "label": "Cycling", "value": "mapbox/cycling" } ] }, "default": "mapbox/cycling", "index": 10 }, { "name": "CreateRoute", "plug": "input", "type": { "name": "signal" }, "group": "Inputs", "index": 11 }, { "name": "Steps", "type": { "name": "array" }, "plug": "output", "group": "Outputs", "index": 12 }, { "name": "Duration", "type": { "name": "number" }, "plug": "output", "group": "Outputs", "index": 13 }, { "name": "Map", "displayName": "Map", "plug": "input", "type": "*", "group": "Inputs", "index": 14 } ], "children": [], "metadata": { "merge": { "soureCodePorts": [ "code" ] } } }, { "id": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6", "type": "Javascript2", "label": "Mapbox On Click", "x": 214.53180846987084, "y": 207.4376377651178, "parameters": { "code": "Script.Outputs = {\n [\"Mapbox Object\"]: \"*\",\n [\"Clicked\"]: \"signal\",\n [\"Clicked Longitude\"]: \"number\",\n [\"Clicked Latitute\"]: \"number\"\n};\n\nScript.Signals[\"Mount Click Event\"] = function () {\n // Listen to the Mapbox on click event\n // NOTE: This might cause some memory leaks,\n // Not sure how Mapbox is handling it.\n Script.Inputs[\"Mapbox Object\"].on(\"click\", (event) => {\n // Get the coordinates that the user pressed on\n const coords = Object.keys(event.lngLat).map((key) => event.lngLat[key]);\n \n // Set the Noodl outputs\n Script.Outputs[\"Clicked Longitude\"] = coords[0];\n Script.Outputs[\"Clicked Latitute\"] = coords[1];\n\n // Send the click signal\n Script.Outputs[\"Clicked\"]();\n });\n};\n" }, "ports": [], "dynamicports": [ { "name": "Mount Click Event", "plug": "input", "type": { "name": "signal" }, "group": "Inputs", "index": 5 }, { "name": "Mapbox Object", "type": { "name": "*" }, "plug": "output", "group": "Outputs", "index": 6 }, { "name": "Clicked", "type": { "name": "signal" }, "plug": "output", "group": "Outputs", "index": 7 }, { "name": "Clicked Longitude", "type": { "name": "number" }, "plug": "output", "group": "Outputs", "index": 8 }, { "name": "Clicked Latitute", "type": { "name": "number" }, "plug": "output", "group": "Outputs", "index": 9 }, { "name": "Mapbox Object", "displayName": "Mapbox Object", "plug": "inputs", "type": "*", "group": "Inputs", "index": 10 } ], "children": [], "metadata": { "merge": { "soureCodePorts": [ "code" ] } } }, { "id": "5ce50c95-dabc-3b92-5523-4d7f42517223", "type": "String Format", "x": 240.39216977332705, "y": 636.3443761457655, "parameters": { "format": "Trip duration: {duration} min 🚴 " }, "ports": [], "dynamicports": [ { "name": "duration", "type": "string", "plug": "input", "index": 2 } ], "children": [] }, { "id": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44", "type": "Expression", "x": 245.8584778700897, "y": 527.0182142105168, "parameters": { "expression": "!!value" }, "ports": [], "dynamicports": [ { "name": "value", "type": { "name": "*", "editAsType": "string" }, "plug": "input", "index": 2 } ], "children": [], "metadata": { "merge": { "soureCodePorts": [ "expression" ] } } } ] }, "metadata": { "canvasSize": { "width": "1039px", "height": "751px" }, "canvasPos": { "x": 0, "y": 0 } } }, { "name": "/Step Item", "id": "5ecebdb7-3c7b-3fc7-e6ca-47eb44aa5eab", "graph": { "connections": [ { "fromId": "29ef3a32-14fa-c4c5-4849-4c7b3d14aaae", "fromProperty": "maneuver", "toId": "1345f2e5-06d9-e6e8-c77b-79897247db70", "toProperty": "maneuver" }, { "fromId": "1345f2e5-06d9-e6e8-c77b-79897247db70", "fromProperty": "result", "toId": "cedd825a-80df-4f45-872e-0aad22adbc67", "toProperty": "text" } ], "roots": [ { "id": "29ef3a32-14fa-c4c5-4849-4c7b3d14aaae", "type": "Component Inputs", "x": -458.5, "y": 78.5, "parameters": {}, "ports": [ { "name": "maneuver", "plug": "output", "type": { "name": "*" }, "index": 2 } ], "dynamicports": [], "children": [] }, { "id": "1345f2e5-06d9-e6e8-c77b-79897247db70", "type": "Expression", "x": -205.5, "y": 67.5, "parameters": { "expression": "maneuver.instruction" }, "ports": [], "dynamicports": [ { "name": "maneuver", "type": { "name": "*", "editAsType": "string" }, "plug": "input", "index": 2 } ], "children": [], "metadata": { "merge": { "soureCodePorts": [ "expression" ] } } }, { "id": "36b8eabc-071e-bee2-b3a8-129bbd9c3e3d", "type": "Group", "x": 51.5, "y": 60.5, "parameters": { "flexDirection": "row" }, "ports": [], "dynamicports": [], "children": [ { "id": "43cb53ed-8410-9778-b4cb-4a35d21278ea", "type": "net.noodl.visual.icon", "parameters": { "iconIconSource": { "class": "material-icons", "code": "circle" }, "iconColor": "Light Gray", "iconSize": { "value": 8, "unit": "px" }, "alignY": "center", "marginRight": { "value": 16, "unit": "px" }, "marginLeft": { "value": 8, "unit": "px" } }, "ports": [], "dynamicports": [], "children": [] }, { "id": "cedd825a-80df-4f45-872e-0aad22adbc67", "type": "Text", "parameters": { "sizeMode": "contentSize" }, "ports": [], "dynamicports": [], "children": [] } ] } ] }, "metadata": { "canvasPos": { "x": 1119, "y": 0 } } } ], "settings": { "mapboxAccessToken": "pk.eyJ1IjoiZXJ0dXYiLCJhIjoiY2w0N2ZubWdpMDVhYTNkbzh6NTJlbm0xaCJ9.Rt2gRXVrbFeEc8aanZclSw" }, "rootNodeId": "246f9453-a119-ac78-171e-3806cf596ecc", "version": "3", "metadata": { "dbCollections": [], "styles": { "colors": { "Primary": "#5836F5", "Light Gray": "#C6C6C6", "Dark Gray": "#434B53", "Primary Dark": "#3F22B8", "Dark": "#1F1F1F", "Primary Light": "#C9BFFC" }, "text": { "Body Text": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "18", "unit": "px" }, "color": "#000000" }, "Button Label": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "16", "unit": "px" }, "color": "#000000" }, "Label Text": { "fontFamily": "fonts/Roboto/Roboto-Regular.ttf", "fontSize": { "value": "14", "unit": "px" }, "color": "#000000" } } } }, "variants": [ { "typename": "net.noodl.controls.button", "parameters": { "height": { "value": 40, "unit": "px" }, "sizeMode": "contentWidth", "backgroundColor": "Primary", "iconIconSource": { "class": "material-icons", "code": "home" }, "iconSize": { "value": 22, "unit": "px" }, "iconSpacing": { "value": 6, "unit": "px" }, "borderRadius": { "value": 4, "unit": "px" }, "textStyle": "Button Label", "paddingTop": { "value": 5, "unit": "px" }, "paddingLeft": { "value": 24, "unit": "px" }, "paddingRight": { "value": 24, "unit": "px" }, "paddingBottom": { "value": 4, "unit": "px" }, "color": "#FFFFFF", "fontFamily": "fonts/Roboto/Roboto-Medium.ttf" }, "stateParamaters": { "hover": { "backgroundColor": "Primary Dark" }, "pressed": { "backgroundColor": "Primary Light", "color": "Primary Dark" }, "disabled": { "backgroundColor": "Light Gray" } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "pressed": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.radiobutton", "parameters": { "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" }, "useLabel": true, "labeltextStyle": "Label Text", "borderWidth": { "value": 2, "unit": "px" }, "value": "0", "useIcon": false, "fillColor": "transparent", "borderColor": "#1F1F1F7F", "labelfontSize": { "value": 16, "unit": "px" } }, "stateParamaters": { "checked": { "fillColor": "Primary", "borderColor": "Primary", "borderWidth": { "value": 2, "unit": "px" }, "backgroundColor": "#FFFFFF", "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" } }, "hover": { "backgroundColor": "transparent", "borderColor": "Primary", "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" } } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "checked": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "Text", "parameters": { "textStyle": "Body Text" }, "stateParamaters": {}, "stateTransitions": {} }, { "typename": "net.noodl.controls.range", "parameters": { "thumbColor": "Primary", "thumbBorderRadius": { "value": 100, "unit": "%" }, "trackHeight": { "value": 4, "unit": "px" }, "trackActiveColor": "Primary", "trackColor": "Primary Light", "width": { "value": 100, "unit": "%" } }, "stateParamaters": {}, "stateTransitions": {} }, { "typename": "net.noodl.controls.checkbox", "parameters": { "width": { "value": 24, "unit": "px" }, "height": { "value": 24, "unit": "px" }, "useIcon": false, "borderWidth": { "value": 2, "unit": "px" }, "useLabel": true, "labeltextStyle": "Label Text", "borderRadius": { "value": 2, "unit": "px" }, "borderColor": "#0000007F", "labelfontSize": { "value": 16, "unit": "px" }, "labelcolor": "Dark" }, "stateParamaters": { "checked": { "useIcon": true, "iconIconSource": { "class": "material-icons", "code": "check" }, "backgroundColor": "Primary", "borderColor": "Primary", "iconSize": { "value": 16, "unit": "px" } }, "disabled": { "opacity": 0.5 }, "hover": { "borderColor": "Primary" }, "pressed": {} }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "hover": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "checked": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.textinput", "parameters": { "useLabel": true, "sizeMode": "explicit", "height": { "value": 40, "unit": "px" }, "textStyle": "Body Text", "borderStyle": "solid", "borderRadius": { "value": 4, "unit": "px" }, "borderWidth": { "value": 2, "unit": "px" }, "borderColor": "#1F1F1F7F", "labeltextStyle": "Label Text", "paddingLeft": { "value": 8, "unit": "px" }, "paddingRight": { "value": 8, "unit": "px" }, "labelSpacing": { "value": 4, "unit": "px" }, "placeholder": "Type here", "labelcolor": "#1F1F1F7F", "labeltextTransform": "uppercase", "labelfontSize": { "value": 12, "unit": "px" }, "labelfontFamily": "fonts/Roboto/Roboto-Medium.ttf" }, "stateParamaters": { "hover": { "labelcolor": "#000000", "borderColor": "Dark", "borderStyle": "solid" }, "focused": { "borderColor": "Primary", "labelcolor": "Primary", "borderWidth": { "value": 2, "unit": "px" }, "boxShadowEnabled": false, "boxShadowColor": "Primary", "borderStyle": "solid" }, "disabled": { "labelcolor": "Light Gray", "backgroundColor": "Light Gray", "borderWidth": { "value": 1, "unit": "px" }, "borderColor": "Light Gray" } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "focused": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } }, { "typename": "net.noodl.controls.options", "parameters": { "sizeMode": "explicit", "height": { "value": 40, "unit": "px" }, "borderWidth": { "value": 2, "unit": "px" }, "borderRadius": { "value": 4, "unit": "px" }, "borderColor": "#1F1F1F7F", "boxShadowColor": "Dark Gray", "useIcon": true, "iconIconSource": { "class": "material-icons", "code": "expand_more" }, "iconPlacement": "right", "iconSize": { "value": 24, "unit": "px" }, "paddingRight": { "value": 8, "unit": "px" }, "textStyle": "Body Text", "paddingLeft": { "value": 8, "unit": "px" }, "marginTop": { "value": 24, "unit": "px" }, "width": { "value": 75, "unit": "%" }, "iconColor": "#1F1F1F7F" }, "stateParamaters": { "hover": { "borderColor": "Dark", "borderRadius": { "value": 4, "unit": "px" }, "iconColor": "Dark", "iconSize": { "value": 24, "unit": "px" }, "iconPlacement": "right" }, "focused": { "borderColor": "Primary", "boxShadowColor": "Primary", "borderRadius": { "value": 4, "unit": "px" }, "useIcon": true, "iconColor": "Primary", "iconIconSource": { "class": "material-icons", "code": "keyboard_arrow_up" }, "iconSize": { "value": 24, "unit": "px" }, "iconPlacement": "right" }, "pressed": { "borderRadius": { "value": 4, "unit": "px" } } }, "stateTransitions": {}, "defaultStateTransitions": { "neutral": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 }, "focused": { "curve": [ 0, 0, 0.58, 1 ], "dur": 300, "delay": 0 } } } ] }