project.json

{"name":"Arrays","components":[{"name":"/#List basics with repeater and clickable items/App","graph":{"connections":[{"fromId":"0e319e2f-6a87-6960-863f-00377e5b7fad","fromProperty":"items","toId":"ef0f1d53-b688-0c51-7177-db53fbeb3003","toProperty":"items"},{"fromId":"ef0f1d53-b688-0c51-7177-db53fbeb3003","fromProperty":"itemActionItemId","toId":"571dfe55-d105-0f14-4e89-87cd1844cff6","toProperty":"modelId"},{"fromId":"571dfe55-d105-0f14-4e89-87cd1844cff6","fromProperty":"prop-name","toId":"280fba47-9c4c-cc40-ccb3-d06c73c8826c","toProperty":"text"},{"fromId":"ef154ab3-7ccb-f09e-cfba-af46c6beec2a","fromProperty":"state","toId":"280fba47-9c4c-cc40-ccb3-d06c73c8826c","toProperty":"mounted"},{"fromId":"ef0f1d53-b688-0c51-7177-db53fbeb3003","fromProperty":"itemOutputSignal-Click","toId":"8c4e9cd4-35ff-4206-c3d3-5dfbe9f52686","toProperty":"restart"},{"fromId":"8c4e9cd4-35ff-4206-c3d3-5dfbe9f52686","fromProperty":"timerStarted","toId":"ef154ab3-7ccb-f09e-cfba-af46c6beec2a","toProperty":"on"},{"fromId":"8c4e9cd4-35ff-4206-c3d3-5dfbe9f52686","fromProperty":"timerFinished","toId":"ef154ab3-7ccb-f09e-cfba-af46c6beec2a","toProperty":"off"}],"roots":[{"id":"246f9453-a119-ac78-171e-3806cf596ecc","type":"Group","x":-111.4681915301291,"y":311.4376377651178,"parameters":{"backgroundColor":"#FFFFFF","minHeight":{"value":100,"unit":"vh"}},"ports":[],"dynamicports":[],"children":[{"id":"ef0f1d53-b688-0c51-7177-db53fbeb3003","type":"For Each","parameters":{"template":"/#List basics with repeater and clickable items/Player item","templateType":"explicit","templateScript":"// Set the 'component' variable to the name of the desired component for this item.\n// Component name must start with a '/'.\n// A component in a sheet is referred to by '/#Sheet Name/Comopnent Name'.\n// The data for each item is available in a variable called 'item'\ncomponent = '/Player Item';"},"ports":[],"dynamicports":[{"name":"itemOutputSignal-Click","displayName":"Click","type":"signal","plug":"output","group":"Item Signals","index":6},{"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})\n","plug":"input","index":7}],"children":[],"metadata":{"merge":{"soureCodePorts":["templateScript"]}}},{"id":"280fba47-9c4c-cc40-ccb3-d06c73c8826c","type":"Text","label":"Text to display the name","parameters":{"alignY":"bottom","alignX":"center","fontSize":{"value":24,"unit":"px"},"sizeMode":"contentWidth","textAlignY":"bottom"},"ports":[],"dynamicports":[],"children":[]}]},{"id":"0e319e2f-6a87-6960-863f-00377e5b7fad","type":"Static Data","label":"Static Array","x":-346.3015248634624,"y":361.6876377651178,"parameters":{"type":"json","json":"[\r\n    {\r\n        \"name\": \"Peter Reid\",\r\n        \"age\": 29,\r\n        \"team\": \"Everton\",\r\n        \"position\": \"Midfield\"\r\n    },\r\n    {\r\n        \"name\": \"Chris Waddle\",\r\n        \"age\": 25,\r\n        \"team\": \"Tottenham\",\r\n        \"position\": \"Midfield\"\r\n    },\r\n    {\r\n        \"name\": \"Mark Hateley\",\r\n        \"age\": 24,\r\n        \"team\": \"Milan\",\r\n        \"position\": \"Forward\"\r\n    },\r\n    {\r\n        \"name\": \"Peter Beardsley\",\r\n        \"age\": 25,\r\n        \"team\": \"Newcastle\",\r\n        \"position\": \"Forward\"\r\n    },\r\n    {\r\n        \"name\": \"Kenneth Sansom\",\r\n        \"age\": 27,\r\n        \"team\": \"Arsenal\",\r\n        \"position\": \"Defender\"\r\n    }\r\n]"},"ports":[],"dynamicports":[],"children":[],"metadata":{"merge":{"soureCodePorts":["json"]}}},{"id":"571dfe55-d105-0f14-4e89-87cd1844cff6","type":"Model2","label":"Object to get assigned ID","x":155.78180846987084,"y":261.5626377651178,"parameters":{"properties":"name"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":8}],"children":[]},{"id":"ef154ab3-7ccb-f09e-cfba-af46c6beec2a","type":"Switch","label":"Selected Text Visible","x":120.67069735875975,"y":477.5626377651178,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"8c4e9cd4-35ff-4206-c3d3-5dfbe9f52686","type":"Timer","x":374.67069735875975,"y":455.5626377651178,"parameters":{"duration":2000},"ports":[],"dynamicports":[],"children":[]}],"visualRoots":["246f9453-a119-ac78-171e-3806cf596ecc"],"comments":[{"text":"Capture the outgoing Click signal together with the Id of the Object associated with the List Item that was clicked","width":187,"height":254,"fill":"transparent","x":138,"y":143,"id":"67ca3f3f-983b-8eba-e09d-61f622cf668a"},{"text":"Capture the Click event from the Repeater for the Item Id, and start a 2s countdown","width":193,"height":208,"fill":"transparent","x":355,"y":373,"id":"adf8edaa-3022-e302-3b5f-81261496b915","largeFont":false},{"text":"JSON data source fed to the repeater","width":171,"height":150,"fill":"transparent","x":-358,"y":296,"id":"c4b92279-200f-faac-9c5a-3e4faabedd59"}]},"metadata":{"canvasSize":{"width":"1039px","height":"751px"},"canvasPos":{"x":0,"y":0}}},{"name":"/#List basics with repeater and clickable items/Player item","id":"20dec39c-f848-1d79-81f4-06a9176e4e96","graph":{"connections":[{"fromId":"71dfb14c-a0da-7ef7-229e-b192b6c880ca","fromProperty":"prop-name","toId":"822ef25e-da50-6299-0968-0bfa0e29ac81","toProperty":"text"},{"fromId":"71dfb14c-a0da-7ef7-229e-b192b6c880ca","fromProperty":"prop-age","toId":"c7abb8f1-08f9-3f60-3c24-4aec77e31d30","toProperty":"text"},{"fromId":"71dfb14c-a0da-7ef7-229e-b192b6c880ca","fromProperty":"prop-team","toId":"ad50d7c2-2259-cb80-1929-235b4c861c80","toProperty":"text"},{"fromId":"3420dddd-a691-15d3-37a7-17933e13c74b","fromProperty":"onClick","toId":"925f962d-cefa-c6fb-9d35-991fce290de1","toProperty":"Click"}],"roots":[{"id":"3420dddd-a691-15d3-37a7-17933e13c74b","type":"Group","x":0,"y":0,"parameters":{"flexDirection":"row","sizeMode":"contentHeight","paddingTop":{"value":5,"unit":"px"},"paddingLeft":{"value":5,"unit":"px"},"paddingRight":{"value":5,"unit":"px"},"paddingBottom":{"value":5,"unit":"px"}},"ports":[],"dynamicports":[],"children":[{"id":"822ef25e-da50-6299-0968-0bfa0e29ac81","type":"Text","parameters":{"text":"Name"},"ports":[],"dynamicports":[],"children":[]},{"id":"c7abb8f1-08f9-3f60-3c24-4aec77e31d30","type":"Text","parameters":{"text":"Age"},"ports":[],"dynamicports":[],"children":[]},{"id":"ad50d7c2-2259-cb80-1929-235b4c861c80","type":"Text","parameters":{"text":"Team"},"ports":[],"dynamicports":[],"children":[]}]},{"id":"71dfb14c-a0da-7ef7-229e-b192b6c880ca","type":"Model2","label":"Object to get the data from each item","x":-196.33333333333337,"y":130,"parameters":{"idSource":"foreach","properties":"name,age,team"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":8},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-age","displayName":"age","index":9},{"type":"signal","plug":"output","group":"Changed Events","displayName":"age Changed","name":"changed-age","index":10},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-team","displayName":"team","index":11},{"type":"signal","plug":"output","group":"Changed Events","displayName":"team Changed","name":"changed-team","index":12}],"children":[]},{"id":"925f962d-cefa-c6fb-9d35-991fce290de1","type":"Component Outputs","x":268,"y":-0.5,"parameters":{},"ports":[{"name":"Click","plug":"input","type":{"name":"*"},"index":1}],"dynamicports":[],"children":[]}],"visualRoots":["3420dddd-a691-15d3-37a7-17933e13c74b"],"comments":[{"text":"Component that can serve as a template for the Repeater.\nOne component will be created per item in the Array that's feeding the Repeater.","width":725,"height":544,"fill":"transparent","x":-244,"y":-166,"id":"c585b2ed-4797-6a53-91c3-4e577f3fbe91","largeFont":true},{"text":"Tell the Object that the Repeater will assign its Id","width":172,"height":215,"fill":"transparent","x":-206,"y":69,"id":"e40616d5-b74f-15c7-c00d-4f8aaadc354e"},{"text":"Letting the Repeater know whenever a List Item is clicked","width":163,"height":160,"fill":"transparent","x":261,"y":-75,"id":"760b0bba-bcc9-e022-3253-a3e345f341b3"}]}},{"name":"/App","id":"184902f0-8c3a-8264-de80-51ee6936fdd2","graph":{"connections":[{"fromId":"1e82e25f-67ae-70ec-8a59-4b23bd9acdd7","fromProperty":"items","toId":"9416c07a-cada-3c76-93c1-c085eac30fb7","toProperty":"items"}],"roots":[{"id":"00476053-507d-cd5c-244f-dba586f58b72","type":"Group","x":-118,"y":-177,"parameters":{},"ports":[],"dynamicports":[],"children":[{"id":"370a2b2a-00d7-b03d-ad5c-97af18ca4aa7","type":"Router","parameters":{"name":"Main","pages":{"routes":["/Recipe List","/Recipe","/New Recipe"],"startPage":"/Recipe List"}},"ports":[],"dynamicports":[],"children":[]}]},{"id":"1e82e25f-67ae-70ec-8a59-4b23bd9acdd7","type":"Static Data","label":"Static list of recipes","x":-173,"y":-353,"parameters":{"type":"json","json":"[\r\n    {\r\n        \"name\": \"Swedish Pancakes\",\r\n        \"description\": \"A simple tasty recipe of classic Swedish pancakes (8-10 pcs)\",\r\n        \"containsMeat\": false,\r\n        \"ingredients\": [\r\n            { \"amount\": \"150 g\", \"name\": \"Wheat flower\" },\r\n            { \"amount\": \"1/2 tsp\", \"name\": \"Salt\" },\r\n            { \"amount\": \"3\", \"name\": \"Eggs\" },\r\n            { \"amount\": \"600 g\", \"name\": \"Milk\" },\r\n            { \"amount\": \"1 tbsp\", \"name\": \"Butter\" }\r\n        ],\r\n        \"instructions\": \"Mix flower, salt, milk and eggs well. Fry thin pancakes on medium heat in butter, 3-4 minutes on each side\"\r\n    },\r\n    {\r\n        \"name\": \"Swedish Meatballs\",\r\n        \"description\": \"A swedish classic. Eat with potatoes, gravy and lingonberries.\",\r\n        \"containsMeat\": true,\r\n        \"ingredients\": [\r\n            { \"amount\": \"500 g\", \"name\": \"Minced meat\" },\r\n            { \"amount\": \"1\", \"name\": \"Egg\" },\r\n            { \"amount\": \"1 clove\", \"name\": \"Garlic\" },\r\n            { \"amount\": \"3 tbsp\", \"name\": \"Bread crumbs\" },\r\n            { \"amount\": \"1/2\", \"name\": \"Yellow Onion\" },\r\n            { \"amount\": \"2 tsp\", \"name\": \"Concentrated beef stock\" },\r\n            { \"amount\": \"2 tbsp\", \"name\": \"Full cream\" },\r\n            { \"amount\": \"1 tsb\", \"name\": \"Salt\" },\r\n            { \"amount\": \"1/2 tbsp\", \"name\": \"Ground pepper\" },\r\n            { \"amount\": \"2 tbsp\", \"name\": \"Butter\" }\r\n        ],\r\n        \"instructions\": \"Chop the onion finely. Put in a bucket. Press the garlic into the bucket. Add egg, bread crumbs, cream, beef stock, salt and pepper and mix. Let it rest for 10 mins. Mix in the minced meat. Make small balls and fry (8-10 at a time) in butter until golden brown and cooked through.\"\r\n    },\r\n    {\r\n        \"name\": \"Kalops\",\r\n        \"description\": \"This Swedish stew should be eaten with potatoes and pickled red beets.\",\r\n        \"containsMeat\": true,\r\n        \"ingredients\": [\r\n            { \"amount\": \"1 kg\", \"name\": \"Boneless Beef\" },\r\n            { \"amount\": \"2 tbsp\", \"name\": \"Butter\" },\r\n            { \"amount\": \"2\", \"name\": \"Yellow onions\" },\r\n            { \"amount\": \"4\", \"name\": \"Carrots\" },\r\n            { \"amount\": \"3\", \"name\": \"Bay leafs\" },\r\n            { \"amount\": \"30\", \"name\": \"Allspice grains\" },\r\n            { \"amount\": \"1 litre\", \"name\": \"Water\" },\r\n            { \"amount\": \"2 tbsp\", \"name\": \"Concentrated beef stock\" },\r\n            { \"amount\": \"1 1/2 tbsp\", \"name\": \"Corn starch\" },\r\n            { \"amount\": \"1 tsb\", \"name\": \"Salt\" },\r\n            { \"amount\": \"1/2 tbsp\", \"name\": \"Ground pepper\" }\r\n        ],\r\n        \"instructions\": \"Cut the meat into 3x3 cm pieces. Peel and cut onions and carrots into 3cm pieces. Fry the meat in a pan with butter until it has a nice surface. Add onion, carrots, bay leafs and allspice. Pour over the water and beef stock. Bring to boil and leave until the meat is tender (2-3 hours depending on meet). Thicken the stew with the corn starch. Add salt and pepper.\"\r\n    }\r\n]"},"ports":[],"dynamicports":[],"children":[],"metadata":{"merge":{"soureCodePorts":["json"]}}},{"id":"9416c07a-cada-3c76-93c1-c085eac30fb7","type":"Collection2","label":"Recipe List","x":94,"y":-354,"parameters":{"collectionId":"Recipe List"},"ports":[],"dynamicports":[],"children":[]}],"visualRoots":["00476053-507d-cd5c-244f-dba586f58b72"]}},{"name":"/Ingredient Item","id":"1b5faa50-1df2-6455-0006-7b89ea23e532","graph":{"connections":[{"fromId":"7f6e0587-a8d8-c4e6-76f8-e488f18ae833","fromProperty":"prop-name","toId":"b2221000-edf8-7097-cb46-ff609471d9eb","toProperty":"text"},{"fromId":"7f6e0587-a8d8-c4e6-76f8-e488f18ae833","fromProperty":"prop-amount","toId":"7bf1812a-71fe-4961-02de-7c6110e9638b","toProperty":"text"}],"roots":[{"id":"b5cf80f7-7d76-c0c4-21d5-1ab1395308de","type":"Group","x":-63,"y":-62,"parameters":{"height":{"value":30,"unit":"px"},"alignItems":"flex-start","flexDirection":"row","sizeMode":"contentWidth"},"ports":[],"dynamicports":[],"children":[{"id":"b2221000-edf8-7097-cb46-ff609471d9eb","type":"Text","label":"Ingredient","parameters":{"alignX":"left","sizeMode":"contentHeight","width":{"value":180,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"7bf1812a-71fe-4961-02de-7c6110e9638b","type":"Text","label":"Amount","parameters":{"alignX":"left","sizeMode":"contentHeight","width":{"value":180,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]}]},{"id":"7f6e0587-a8d8-c4e6-76f8-e488f18ae833","type":"Model2","x":-303.33333333333337,"y":15.666666666666686,"parameters":{"idSource":"foreach","properties":"name,amount"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":8},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-amount","displayName":"amount","index":9},{"type":"signal","plug":"output","group":"Changed Events","displayName":"amount Changed","name":"changed-amount","index":10}],"children":[]}],"visualRoots":["b5cf80f7-7d76-c0c4-21d5-1ab1395308de"],"comments":[{"text":"Connect the desired data point in the Object to the Text in this list item","width":177,"height":184,"fill":"transparent","x":-317,"y":-64,"id":"c7451cdc-594e-e205-c090-92f295fe945f"},{"text":"Template for the repeater component in Recipe page","width":496,"height":59,"fill":"transparent","x":-359,"y":-197,"id":"7671a2b3-5108-80a3-ba98-86e0c0f97be6","largeFont":true}]}},{"name":"/New Recipe","id":"c5324344-2b1e-1227-15b3-20d621fd4c92","graph":{"connections":[{"fromId":"a24051d1-7400-8d61-0727-65e5d6458018","fromProperty":"didMount","toId":"1056c0cb-78da-17a8-586e-40d1f36a5b34","toProperty":"new"},{"fromId":"1056c0cb-78da-17a8-586e-40d1f36a5b34","fromProperty":"created","toId":"b6511725-0b40-227d-07cc-ca95411f97ad","toProperty":"new"},{"fromId":"1056c0cb-78da-17a8-586e-40d1f36a5b34","fromProperty":"id","toId":"c66a7022-27c0-2217-799f-4b18933e4b1e","toProperty":"modelId"},{"fromId":"63c027bc-d6e0-dcaf-34c0-0dc04c2f71dc","fromProperty":"checked","toId":"c66a7022-27c0-2217-799f-4b18933e4b1e","toProperty":"prop-containsMeat"},{"fromId":"c00d6af9-a7c0-72e0-49fd-e5d194319482","fromProperty":"onTextChanged","toId":"c66a7022-27c0-2217-799f-4b18933e4b1e","toProperty":"prop-name"},{"fromId":"cd9b40a4-6456-71e0-fca4-a0392c7b72ed","fromProperty":"onTextChanged","toId":"c66a7022-27c0-2217-799f-4b18933e4b1e","toProperty":"prop-description"},{"fromId":"7fab271e-9ba7-5439-bd27-a246c5e0a11d","fromProperty":"onTextChanged","toId":"c66a7022-27c0-2217-799f-4b18933e4b1e","toProperty":"prop-instructions"},{"fromId":"b6511725-0b40-227d-07cc-ca95411f97ad","fromProperty":"id","toId":"07c2353c-3e48-4972-bfd4-6ffe4ed2eacd","toProperty":"collectionId"},{"fromId":"07c2353c-3e48-4972-bfd4-6ffe4ed2eacd","fromProperty":"items","toId":"674ef8d3-975d-6ab1-3c37-8427f963e753","toProperty":"items"},{"fromId":"aa61ef79-7cea-d1c1-a9d4-2ddb0202ff55","fromProperty":"onTextChanged","toId":"88f0e5da-31ce-5c25-a963-b540b9da2e21","toProperty":"prop-name"},{"fromId":"6d0568f1-7004-5f01-2cf4-c725e47b470c","fromProperty":"onTextChanged","toId":"88f0e5da-31ce-5c25-a963-b540b9da2e21","toProperty":"prop-amount"},{"fromId":"6e65972a-9888-e0e4-a138-58dd756e53dc","fromProperty":"onClick","toId":"88f0e5da-31ce-5c25-a963-b540b9da2e21","toProperty":"new"},{"fromId":"88f0e5da-31ce-5c25-a963-b540b9da2e21","fromProperty":"created","toId":"090ea68e-2d94-50e3-be55-393da4da81c1","toProperty":"add"},{"fromId":"07c2353c-3e48-4972-bfd4-6ffe4ed2eacd","fromProperty":"id","toId":"090ea68e-2d94-50e3-be55-393da4da81c1","toProperty":"collectionId"},{"fromId":"88f0e5da-31ce-5c25-a963-b540b9da2e21","fromProperty":"id","toId":"090ea68e-2d94-50e3-be55-393da4da81c1","toProperty":"modifyId"},{"fromId":"090ea68e-2d94-50e3-be55-393da4da81c1","fromProperty":"modified","toId":"aa61ef79-7cea-d1c1-a9d4-2ddb0202ff55","toProperty":"clear"},{"fromId":"090ea68e-2d94-50e3-be55-393da4da81c1","fromProperty":"modified","toId":"6d0568f1-7004-5f01-2cf4-c725e47b470c","toProperty":"clear"},{"fromId":"07c2353c-3e48-4972-bfd4-6ffe4ed2eacd","fromProperty":"items","toId":"48f2aeb2-6644-0fda-b895-508c0a8aad24","toProperty":"prop-ingredients"},{"fromId":"16fe93bc-3b6a-4011-c3ec-2892a4120cd7","fromProperty":"onClick","toId":"48f2aeb2-6644-0fda-b895-508c0a8aad24","toProperty":"store"},{"fromId":"48f2aeb2-6644-0fda-b895-508c0a8aad24","fromProperty":"stored","toId":"50f54f8f-ec92-2a9d-e7e9-0419964e36f8","toProperty":"add"},{"fromId":"dfeecc3f-e042-a2c8-ea73-6ec4f33bb2de","fromProperty":"onClick","toId":"e2118c40-16df-cce3-802f-7b7e7dd68610","toProperty":"navigate"},{"fromId":"50f54f8f-ec92-2a9d-e7e9-0419964e36f8","fromProperty":"modified","toId":"e2118c40-16df-cce3-802f-7b7e7dd68610","toProperty":"navigate"},{"fromId":"c66a7022-27c0-2217-799f-4b18933e4b1e","fromProperty":"id","toId":"50f54f8f-ec92-2a9d-e7e9-0419964e36f8","toProperty":"modifyId"},{"fromId":"c66a7022-27c0-2217-799f-4b18933e4b1e","fromProperty":"id","toId":"48f2aeb2-6644-0fda-b895-508c0a8aad24","toProperty":"modelId"}],"roots":[{"id":"a24051d1-7400-8d61-0727-65e5d6458018","type":"Page","x":0,"y":0,"parameters":{"paddingLeft":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[{"name":"title","displayName":"Title","type":"string","group":"General","plug":"input","default":"New Recipe","index":31},{"name":"urlPath","displayName":"Url Path","type":"string","group":"General","plug":"input","default":"new-recipe","index":32}],"children":[{"id":"ad88bef5-3a75-dd54-05fe-3bb661d8402c","type":"Text","parameters":{"text":"New Recipe","textStyle":"Title Large"},"ports":[],"dynamicports":[],"children":[]},{"id":"63c027bc-d6e0-dcaf-34c0-0dc04c2f71dc","type":"net.noodl.controls.checkbox","parameters":{"label":"Contains meat","marginTop":{"value":18,"unit":"px"},"labeltextStyle":"Body Small","labelfontSize":{"value":14,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"c00d6af9-a7c0-72e0-49fd-e5d194319482","type":"net.noodl.controls.textinput","parameters":{"label":"Recipe name","marginTop":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"cd9b40a4-6456-71e0-fca4-a0392c7b72ed","type":"net.noodl.controls.textinput","parameters":{"label":"Description","marginTop":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"7fab271e-9ba7-5439-bd27-a246c5e0a11d","type":"net.noodl.controls.textinput","parameters":{"label":"Instructions","marginTop":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"e217f77a-7572-e0be-e0ce-57e343e394ae","type":"Text","label":"Ingredients","parameters":{"text":"Ingredients:","marginTop":{"value":22,"unit":"px"},"textStyle":"Title Medium"},"ports":[],"dynamicports":[],"children":[]},{"id":"2b6af0eb-b032-cf52-e301-ceb0f184f7a1","type":"Group","parameters":{"flexDirection":"row","alignItems":"flex-end","sizeMode":"contentSize","columnGap":{"value":10,"unit":"px"}},"ports":[],"dynamicports":[],"children":[{"id":"aa61ef79-7cea-d1c1-a9d4-2ddb0202ff55","type":"net.noodl.controls.textinput","parameters":{"label":"Ingredient name","marginTop":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"6d0568f1-7004-5f01-2cf4-c725e47b470c","type":"net.noodl.controls.textinput","parameters":{"label":"Amount","marginTop":{"value":18,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"6e65972a-9888-e0e4-a138-58dd756e53dc","type":"net.noodl.controls.button","parameters":{"label":"Add"},"ports":[],"dynamicports":[],"children":[]}]},{"id":"92b8a0ac-ef4f-27e0-2e99-6b24f620ad7b","type":"Group","parameters":{"marginTop":{"value":12,"unit":"px"}},"ports":[],"dynamicports":[],"children":[{"id":"674ef8d3-975d-6ab1-3c37-8427f963e753","type":"For Each","parameters":{"template":"/Ingredient 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})\n","plug":"input","index":6}],"children":[]}]},{"id":"d7759cdd-aab8-d03f-1cd2-ebe9933a7ff8","type":"Group","parameters":{"flexDirection":"row","justifyContent":"space-around","marginTop":{"value":24,"unit":"px"},"marginBottom":{"value":12,"unit":"px"}},"ports":[],"dynamicports":[],"children":[{"id":"16fe93bc-3b6a-4011-c3ec-2892a4120cd7","type":"net.noodl.controls.button","parameters":{"label":"Save"},"ports":[],"dynamicports":[],"children":[]},{"id":"dfeecc3f-e042-a2c8-ea73-6ec4f33bb2de","type":"net.noodl.controls.button","parameters":{"label":"Cancel"},"ports":[],"dynamicports":[],"children":[]}]}]},{"id":"47b2eee2-d8b3-38e5-9dc0-3520759c0056","type":"PageInputs","x":-100,"y":-50,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"1056c0cb-78da-17a8-586e-40d1f36a5b34","type":"NewModel","x":238.78947368421052,"y":41.15789473684211,"parameters":{"properties":"containsMeat","type-containsMeat":"boolean"},"ports":[],"dynamicports":[{"type":{"name":"boolean"},"plug":"input","group":"Property Values","displayName":"containsMeat","name":"prop-containsMeat","index":4},{"type":{"name":"enum","enums":[{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Number","value":"number"},{"label":"Date","value":"date"},{"label":"Array","value":"array"},{"label":"Object","value":"object"},{"label":"Any","value":"*"}],"allowEditOnly":true},"plug":"input","group":"Property Types","displayName":"containsMeat","default":"*","name":"type-containsMeat","index":5}],"children":[]},{"id":"b6511725-0b40-227d-07cc-ca95411f97ad","type":"CollectionNew","x":496,"y":85,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"c66a7022-27c0-2217-799f-4b18933e4b1e","type":"Model2","x":468.52631578947376,"y":299.2271468144044,"parameters":{"properties":"containsMeat,name,description,instructions,ingredients"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-containsMeat","displayName":"containsMeat","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"containsMeat Changed","name":"changed-containsMeat","index":8},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":9},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":10},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-description","displayName":"description","index":11},{"type":"signal","plug":"output","group":"Changed Events","displayName":"description Changed","name":"changed-description","index":12},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-instructions","displayName":"instructions","index":13},{"type":"signal","plug":"output","group":"Changed Events","displayName":"instructions Changed","name":"changed-instructions","index":14},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-ingredients","displayName":"ingredients","index":15},{"type":"signal","plug":"output","group":"Changed Events","displayName":"ingredients Changed","name":"changed-ingredients","index":16}],"children":[]},{"id":"07c2353c-3e48-4972-bfd4-6ffe4ed2eacd","type":"Collection2","label":"List of ingredients","x":947.4468734893071,"y":702.5507631156913,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"88f0e5da-31ce-5c25-a963-b540b9da2e21","type":"NewModel","x":349.3954092301729,"y":608.6816605486381,"parameters":{"properties":"name,amount","type-name":"string","type-amount":"string"},"ports":[],"dynamicports":[{"type":{"name":"string"},"plug":"input","group":"Property Values","displayName":"name","name":"prop-name","index":4},{"type":{"name":"enum","enums":[{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Number","value":"number"},{"label":"Date","value":"date"},{"label":"Array","value":"array"},{"label":"Object","value":"object"},{"label":"Any","value":"*"}],"allowEditOnly":true},"plug":"input","group":"Property Types","displayName":"name","default":"*","name":"type-name","index":5},{"type":{"name":"string"},"plug":"input","group":"Property Values","displayName":"amount","name":"prop-amount","index":6},{"type":{"name":"enum","enums":[{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Number","value":"number"},{"label":"Date","value":"date"},{"label":"Array","value":"array"},{"label":"Object","value":"object"},{"label":"Any","value":"*"}],"allowEditOnly":true},"plug":"input","group":"Property Types","displayName":"amount","default":"*","name":"type-amount","index":7}],"children":[]},{"id":"090ea68e-2d94-50e3-be55-393da4da81c1","type":"CollectionInsert","x":629.1634824523485,"y":677.1901721076216,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"48f2aeb2-6644-0fda-b895-508c0a8aad24","type":"SetModelProperties","x":304.0682263951039,"y":1135.247652051086,"parameters":{"properties":"ingredients","type-ingredients":"array"},"ports":[],"dynamicports":[{"type":{"name":"array"},"plug":"input","group":"Property Values","displayName":"ingredients","name":"prop-ingredients","index":6},{"type":{"name":"enum","enums":[{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Number","value":"number"},{"label":"Date","value":"date"},{"label":"Array","value":"array"},{"label":"Object","value":"object"},{"label":"Any","value":"*"}],"allowEditOnly":true},"plug":"input","group":"Property Types","displayName":"ingredients","default":"*","name":"type-ingredients","index":7}],"children":[]},{"id":"50f54f8f-ec92-2a9d-e7e9-0419964e36f8","type":"CollectionInsert","x":632.5523887213487,"y":1125.3819512047132,"parameters":{"collectionId":"Recipe List"},"ports":[],"dynamicports":[],"children":[]},{"id":"e2118c40-16df-cce3-802f-7b7e7dd68610","type":"RouterNavigate","x":819.9608836428631,"y":1242.738460900005,"parameters":{"router":"Main","target":"/Recipe List"},"ports":[],"dynamicports":[{"plug":"input","type":{"name":"component","title":"Choose page component","components":["/Recipe List","/Recipe","/New Recipe"],"allowEditOnly":true},"group":"General","displayName":"Target Page","name":"target","index":3}],"children":[]}],"visualRoots":["a24051d1-7400-8d61-0727-65e5d6458018"],"comments":[{"text":"As we enter the page, we create a new Object to hold the recipe data","width":186,"height":187,"fill":"transparent","x":219,"y":-46,"id":"9369d119-136f-4beb-f090-12440cb745f0"},{"text":"Create a new Array that will hold the ingredients","width":170,"height":178,"fill":"transparent","x":487,"y":-7,"id":"f0d83309-e9fb-77a0-093d-d8d29c47dd66"},{"text":"Not using a 'Set Object Properties' since we want the Object to be updated at any change of the inputs","width":174,"height":289,"fill":"transparent","x":455,"y":191,"id":"53ea0073-0732-8b62-e45e-771e5fb7f62d"},{"text":"Create a new Object (representing the ingredient) when we click Add","width":169,"height":220,"fill":"transparent","x":340,"y":511,"id":"6ab52f8a-9c85-7d9b-31da-7ae14925e600"},{"text":"Add that new Object to the Array of ingredients","width":178,"height":220,"fill":"transparent","x":615,"y":599,"id":"14a318f4-6219-6fd9-284f-03f5b645fca8"}]}},{"name":"/Recipe","id":"a0514da4-a326-d206-18c2-c6833e4e2e9b","graph":{"connections":[{"fromId":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","fromProperty":"prop-name","toId":"a592159a-b996-2faf-60c1-83f542fdfd22","toProperty":"text"},{"fromId":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","fromProperty":"prop-description","toId":"5798ef7f-a9f3-ca3a-ea19-1316847bfa36","toProperty":"text"},{"fromId":"b9ad6cbe-cae8-b8d8-11ca-3cc0737c940c","fromProperty":"pm-RecipeId","toId":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","toProperty":"modelId"},{"fromId":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","fromProperty":"prop-ingredients","toId":"1a43c47d-8e3d-8915-fe1f-3fdb7dac5c36","toProperty":"items"},{"fromId":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","fromProperty":"prop-instructions","toId":"6cc24448-2829-e444-adba-a7c768178987","toProperty":"text"}],"roots":[{"id":"f7e60eaf-3e99-4d3c-ae03-4aaedabc956b","type":"Page","x":40,"y":17,"parameters":{},"ports":[],"dynamicports":[{"name":"title","displayName":"Title","type":"string","group":"General","plug":"input","default":"Recipe","index":31},{"name":"urlPath","displayName":"Url Path","type":"string","group":"General","plug":"input","default":"recipe","index":32}],"children":[{"id":"a592159a-b996-2faf-60c1-83f542fdfd22","type":"Text","parameters":{"fontSize":{"value":24,"unit":"px"},"text":"Recipe Name"},"ports":[],"dynamicports":[],"children":[]},{"id":"5798ef7f-a9f3-ca3a-ea19-1316847bfa36","type":"Text","parameters":{"fontSize":{"value":24,"unit":"px"},"text":"Description"},"ports":[],"dynamicports":[],"children":[]},{"id":"1a43c47d-8e3d-8915-fe1f-3fdb7dac5c36","type":"For Each","parameters":{"template":"/Ingredient 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})\n","plug":"input","index":6}],"children":[]},{"id":"6cc24448-2829-e444-adba-a7c768178987","type":"Text","label":"Instructions","parameters":{"marginTop":{"value":12,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]}]},{"id":"b9ad6cbe-cae8-b8d8-11ca-3cc0737c940c","type":"PageInputs","x":-391,"y":90,"parameters":{"pathParams":"RecipeId"},"ports":[],"dynamicports":[{"name":"pm-RecipeId","displayName":"RecipeId","type":"*","plug":"output","group":"Parameters","index":2}],"children":[]},{"id":"3a78c869-88b9-3770-0f98-b7d04b86d3ec","type":"Model2","x":-171,"y":83,"parameters":{"idSource":"explicit","properties":"name,description,ingredients,instructions"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":8},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-description","displayName":"description","index":9},{"type":"signal","plug":"output","group":"Changed Events","displayName":"description Changed","name":"changed-description","index":10},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-ingredients","displayName":"ingredients","index":11},{"type":"signal","plug":"output","group":"Changed Events","displayName":"ingredients Changed","name":"changed-ingredients","index":12},{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-instructions","displayName":"instructions","index":13},{"type":"signal","plug":"output","group":"Changed Events","displayName":"instructions Changed","name":"changed-instructions","index":14}],"children":[]}],"visualRoots":["f7e60eaf-3e99-4d3c-ae03-4aaedabc956b"],"comments":[{"text":"Contains path param recipeId","width":162,"height":139,"fill":"transparent","x":-397,"y":32,"id":"80cbf6f1-03e2-92f0-71bd-29503eb06373"}]}},{"name":"/Recipe List","id":"5936866a-08bb-e478-fc15-b85fc2385d45","graph":{"connections":[{"fromId":"99e15c1d-fc12-ba2c-890a-605effd8425d","fromProperty":"itemActionItemId","toId":"a1111425-c4a4-2d5e-0310-19928ec2241e","toProperty":"modifyId"},{"fromId":"db3f5346-4e0e-26b1-10be-7cdfa9e3e4ec","fromProperty":"id","toId":"a1111425-c4a4-2d5e-0310-19928ec2241e","toProperty":"collectionId"},{"fromId":"99e15c1d-fc12-ba2c-890a-605effd8425d","fromProperty":"itemOutputSignal-Request Delete","toId":"a1111425-c4a4-2d5e-0310-19928ec2241e","toProperty":"remove"},{"fromId":"db3f5346-4e0e-26b1-10be-7cdfa9e3e4ec","fromProperty":"count","toId":"c9072a4e-16b5-d678-a198-b46045ce77da","toProperty":"count"},{"fromId":"c9072a4e-16b5-d678-a198-b46045ce77da","fromProperty":"result","toId":"76b49f73-f1d4-37b8-7717-0ba0f0ef771b","toProperty":"mounted"},{"fromId":"99e15c1d-fc12-ba2c-890a-605effd8425d","fromProperty":"itemActionItemId","toId":"107f951b-59a0-21c7-04c2-cadfe1989da5","toProperty":"pm-RecipeId"},{"fromId":"99e15c1d-fc12-ba2c-890a-605effd8425d","fromProperty":"itemOutputSignal-Request item view","toId":"107f951b-59a0-21c7-04c2-cadfe1989da5","toProperty":"navigate"},{"fromId":"b138e809-7ab3-b7d6-ac1b-4d59f79ddf3e","fromProperty":"items","toId":"b7bd2c86-e415-12b2-e17e-11bbec481b28","toProperty":"items"},{"fromId":"b7bd2c86-e415-12b2-e17e-11bbec481b28","fromProperty":"value","toId":"47d6713d-d9d1-0837-567e-f7d6dae34e46","toProperty":"currentState"},{"fromId":"47d6713d-d9d1-0837-567e-f7d6dae34e46","fromProperty":"Filter Enabled","toId":"98eda5a8-2e15-3653-79ad-29d72a5658ce","toProperty":"enabled"},{"fromId":"47d6713d-d9d1-0837-567e-f7d6dae34e46","fromProperty":"containsMeat","toId":"98eda5a8-2e15-3653-79ad-29d72a5658ce","toProperty":"filterFilterValue-containsMeat"},{"fromId":"8de64bfd-c5a5-baf8-e05f-12e06455febe","fromProperty":"onClick","toId":"ac1c9a04-3941-76e0-fe41-cb6df44e5451","toProperty":"navigate"},{"fromId":"98eda5a8-2e15-3653-79ad-29d72a5658ce","fromProperty":"items","toId":"99e15c1d-fc12-ba2c-890a-605effd8425d","toProperty":"items"},{"fromId":"db3f5346-4e0e-26b1-10be-7cdfa9e3e4ec","fromProperty":"items","toId":"98eda5a8-2e15-3653-79ad-29d72a5658ce","toProperty":"items"}],"roots":[{"id":"18a90c66-2c80-a806-3ec8-ab8405a0b4bb","type":"Page","x":12,"y":-26,"parameters":{"paddingTop":{"value":10,"unit":"px"},"paddingLeft":{"value":10,"unit":"px"}},"ports":[],"dynamicports":[{"name":"title","displayName":"Title","type":"string","group":"General","plug":"input","default":"Recipe List","index":31},{"name":"urlPath","displayName":"Url Path","type":"string","group":"General","plug":"input","default":"recipe-list","index":32}],"children":[{"id":"f0de866f-f166-24c6-6e6f-462b80737030","type":"Text","parameters":{"fontSize":{"value":24,"unit":"px"},"text":"Recipes"},"ports":[],"dynamicports":[],"children":[]},{"id":"b7bd2c86-e415-12b2-e17e-11bbec481b28","type":"net.noodl.controls.options","parameters":{"useLabel":false,"placeholder":"Select diet","marginBottom":{"value":12,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"99e15c1d-fc12-ba2c-890a-605effd8425d","type":"For Each","parameters":{"template":"/Recipe List Item"},"ports":[],"dynamicports":[{"name":"itemOutputSignal-Request Delete","displayName":"Request Delete","type":"signal","plug":"output","group":"Item Signals","index":6},{"name":"itemOutputSignal-Request item view","displayName":"Request item view","type":"signal","plug":"output","group":"Item Signals","index":7},{"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})\n","plug":"input","index":8}],"children":[]},{"id":"76b49f73-f1d4-37b8-7717-0ba0f0ef771b","type":"Text","parameters":{"textAlignX":"center","text":"List empty"},"ports":[],"dynamicports":[],"children":[]},{"id":"8de64bfd-c5a5-baf8-e05f-12e06455febe","type":"net.noodl.controls.button","parameters":{"label":"Add new recipe","alignX":"center"},"ports":[],"dynamicports":[],"children":[]}]},{"id":"6eca9cc3-a3d2-4114-c880-f7f6bccccd93","type":"PageInputs","x":-88,"y":-76,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"db3f5346-4e0e-26b1-10be-7cdfa9e3e4ec","type":"Collection2","label":"Recipe List","x":-632.6666666666667,"y":202.33333333333337,"parameters":{"collectionId":"Recipe List"},"ports":[],"dynamicports":[],"children":[]},{"id":"a1111425-c4a4-2d5e-0310-19928ec2241e","type":"CollectionRemove","x":289.33333333333326,"y":229.33333333333337,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"c9072a4e-16b5-d678-a198-b46045ce77da","type":"Expression","x":-206.20000000000005,"y":284.6,"parameters":{"expression":"count === 0"},"ports":[],"dynamicports":[{"group":"Parameters","name":"count","type":{"name":"*","editAsType":"string"},"plug":"input","index":7}],"children":[],"metadata":{"merge":{"soureCodePorts":["expression"]}}},{"id":"107f951b-59a0-21c7-04c2-cadfe1989da5","type":"RouterNavigate","x":287.57777777777767,"y":110.37777777777782,"parameters":{"router":"Main","target":"/Recipe"},"ports":[],"dynamicports":[{"plug":"input","type":{"name":"component","title":"Choose page component","components":["/Recipe List","/Recipe","/New Recipe"],"allowEditOnly":true},"group":"General","displayName":"Target Page","name":"target","index":3},{"name":"pm-RecipeId","displayName":"RecipeId","type":"string","plug":"input","group":"Parameters","index":4}],"children":[]},{"id":"b138e809-7ab3-b7d6-ac1b-4d59f79ddf3e","type":"Static Data","label":"Static list of diet options","x":282,"y":-27,"parameters":{"type":"json","json":"[\r\n    { \"Label\": \"Show all recepies\", \"Value\": \"all\" },\r\n    { \"Label\": \"Show recepies with meat\", \"Value\": \"meat\" },\r\n    { \"Label\": \"Show vegetarian recepies\", \"Value\": \"veg\" }\r\n]"},"ports":[],"dynamicports":[],"children":[],"metadata":{"merge":{"soureCodePorts":["json"]}}},{"id":"47d6713d-d9d1-0837-567e-f7d6dae34e46","type":"States","label":"Filter States","x":-338.6126984126985,"y":-108.90793650793648,"parameters":{"states":"all,meat,veg","values":"Filter Enabled,containsMeat","type-Filter Enabled":"boolean","type-containsMeat":"boolean","value-all-containsMeat":true,"value-meat-Filter Enabled":true,"value-veg-Filter Enabled":true,"value-meat-containsMeat":true},"ports":[],"dynamicports":[{"type":{"name":"boolean","allowConnectionsOnly":true},"plug":"output","group":"Values","name":"Filter Enabled","index":6},{"type":{"name":"enum","enums":[{"label":"Number","value":"number"},{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Color","value":"color"},{"label":"Text Style","value":"textStyle"}],"allowEditOnly":true},"default":"number","plug":"input","group":"Types","displayName":"Filter Enabled","name":"type-Filter Enabled","index":7},{"type":{"name":"boolean","allowConnectionsOnly":true},"plug":"output","group":"Values","name":"containsMeat","index":8},{"type":{"name":"enum","enums":[{"label":"Number","value":"number"},{"label":"String","value":"string"},{"label":"Boolean","value":"boolean"},{"label":"Color","value":"color"},{"label":"Text Style","value":"textStyle"}],"allowEditOnly":true},"default":"number","plug":"input","group":"Types","displayName":"containsMeat","name":"type-containsMeat","index":9},{"plug":"input","type":"boolean","group":"all Values","name":"value-all-Filter Enabled","displayName":"Filter Enabled","editorName":"all|Filter Enabled","index":10},{"plug":"input","type":"boolean","group":"all Values","name":"value-all-containsMeat","displayName":"containsMeat","editorName":"all|containsMeat","index":11},{"plug":"input","type":"curve","displayName":"Default","default":{"curve":[0,0,0.58,1],"dur":300,"delay":0},"group":"all Transitions","name":"transitiondef-all","index":12},{"plug":"input","type":{"name":"signal","allowConnectionsOnly":true},"displayName":"To all","name":"to-all","group":"Go to state","index":13},{"plug":"output","type":"boolean","displayName":"At all","name":"at-all","group":"Current state","index":14},{"plug":"output","type":"signal","displayName":"Has Reached all","name":"reached-all","group":"Current state","index":15},{"plug":"input","type":"boolean","group":"meat Values","name":"value-meat-Filter Enabled","displayName":"Filter Enabled","editorName":"meat|Filter Enabled","index":16},{"plug":"input","type":"boolean","group":"meat Values","name":"value-meat-containsMeat","displayName":"containsMeat","editorName":"meat|containsMeat","index":17},{"plug":"input","type":"curve","displayName":"Default","default":{"curve":[0,0,0.58,1],"dur":300,"delay":0},"group":"meat Transitions","name":"transitiondef-meat","index":18},{"plug":"input","type":{"name":"signal","allowConnectionsOnly":true},"displayName":"To meat","name":"to-meat","group":"Go to state","index":19},{"plug":"output","type":"boolean","displayName":"At meat","name":"at-meat","group":"Current state","index":20},{"plug":"output","type":"signal","displayName":"Has Reached meat","name":"reached-meat","group":"Current state","index":21},{"plug":"input","type":"boolean","group":"veg Values","name":"value-veg-Filter Enabled","displayName":"Filter Enabled","editorName":"veg|Filter Enabled","index":22},{"plug":"input","type":"boolean","group":"veg Values","name":"value-veg-containsMeat","displayName":"containsMeat","editorName":"veg|containsMeat","index":23},{"plug":"input","type":"curve","displayName":"Default","default":{"curve":[0,0,0.58,1],"dur":300,"delay":0},"group":"veg Transitions","name":"transitiondef-veg","index":24},{"plug":"input","type":{"name":"signal","allowConnectionsOnly":true},"displayName":"To veg","name":"to-veg","group":"Go to state","index":25},{"plug":"output","type":"boolean","displayName":"At veg","name":"at-veg","group":"Current state","index":26},{"plug":"output","type":"signal","displayName":"Has Reached veg","name":"reached-veg","group":"Current state","index":27},{"plug":"input","type":{"name":"enum","enums":["all","meat","veg"]},"group":"States","displayName":"State","name":"currentState","default":"all","index":28}],"children":[]},{"id":"98eda5a8-2e15-3653-79ad-29d72a5658ce","type":"Filter Collection","x":-345.6126984126985,"y":157.09206349206352,"parameters":{"filterFilter":"containsMeat","filterFilterType-containsMeat":"boolean"},"ports":[],"dynamicports":[{"type":"boolean","plug":"input","group":"Limit","name":"filterEnableLimit","displayName":"Use limit","index":7},{"type":{"name":"stringlist","allowEditOnly":true},"plug":"input","group":"Filter","name":"filterFilter","displayName":"Filter","index":8},{"type":{"name":"stringlist","allowEditOnly":true},"plug":"input","group":"Sort","name":"filterSort","displayName":"Sort","index":9},{"type":{"name":"enum","enums":[{"value":"string","label":"String"},{"value":"number","label":"Number"},{"value":"boolean","label":"Boolean"}]},"default":"string","plug":"input","group":"containsMeat filter","displayName":"Type","editorName":"containsMeat filter | Type","name":"filterFilterType-containsMeat","index":10},{"type":{"name":"enum","enums":[{"value":"eq","label":"Equals"},{"value":"neq","label":"Not Equals"}]},"default":"eq","plug":"input","group":"containsMeat filter","displayName":"Op","editorName":"containsMeat filter| Op","name":"filterFilterOp-containsMeat","index":11},{"type":"boolean","plug":"input","group":"containsMeat filter","displayName":"Value","editorName":"containsMeat Filter Value","name":"filterFilterValue-containsMeat","index":12}],"children":[]},{"id":"ac1c9a04-3941-76e0-fe41-cb6df44e5451","type":"RouterNavigate","label":"Navigate to new recipe","x":295.58190476190475,"y":393.6828571428572,"parameters":{"router":"Main","target":"/New Recipe"},"ports":[],"dynamicports":[{"plug":"input","type":{"name":"component","title":"Choose page component","components":["/Recipe List","/Recipe","/New Recipe"],"allowEditOnly":true},"group":"General","displayName":"Target Page","name":"target","index":3}],"children":[]}],"visualRoots":["18a90c66-2c80-a806-3ec8-ab8405a0b4bb"],"comments":[{"text":"Since content must be modifiable (add or del items), we need to first feed the Items into an Array that's not static","width":184,"height":386,"fill":"transparent","x":-647,"y":-48,"id":"ad833c25-28bc-4989-f872-62e7da3cb135"},{"text":"\n\n\n\n\nIf count is zero, show empty list alert","width":173,"height":156,"fill":"transparent","x":-218,"y":275,"id":"c0245e5f-fb17-a349-327b-c3b417f58c65"}]}},{"name":"/Recipe List Item","id":"81e44de8-8c7e-2a77-75d2-cd008a21db09","graph":{"connections":[{"fromId":"90b724d6-3835-1c28-39c9-e9f4d41c7983","fromProperty":"prop-name","toId":"5439357b-1634-3eb2-161b-b3f84681fb47","toProperty":"text"},{"fromId":"059990a2-83f2-bf6a-e2c4-63ab0420a1f4","fromProperty":"hoverStart","toId":"ab563d17-a568-5772-e440-8374f4b4c18b","toProperty":"on"},{"fromId":"059990a2-83f2-bf6a-e2c4-63ab0420a1f4","fromProperty":"hoverEnd","toId":"ab563d17-a568-5772-e440-8374f4b4c18b","toProperty":"off"},{"fromId":"ab563d17-a568-5772-e440-8374f4b4c18b","fromProperty":"state","toId":"c2610741-d9ff-d49a-115d-62c07e58a82b","toProperty":"mounted"},{"fromId":"c2610741-d9ff-d49a-115d-62c07e58a82b","fromProperty":"onClick","toId":"af156f87-1d50-26ab-d249-e032bf9577a0","toProperty":"Request Delete"},{"fromId":"5439357b-1634-3eb2-161b-b3f84681fb47","fromProperty":"onClick","toId":"af156f87-1d50-26ab-d249-e032bf9577a0","toProperty":"Request item view"}],"roots":[{"id":"059990a2-83f2-bf6a-e2c4-63ab0420a1f4","type":"Group","x":-65,"y":-14,"parameters":{"height":{"value":30,"unit":"px"},"alignItems":"flex-start","flexDirection":"row","sizeMode":"contentWidth"},"ports":[],"dynamicports":[],"children":[{"id":"5439357b-1634-3eb2-161b-b3f84681fb47","type":"Text","parameters":{"alignX":"left","sizeMode":"contentHeight","width":{"value":180,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]},{"id":"c2610741-d9ff-d49a-115d-62c07e58a82b","type":"Group","parameters":{"sizeMode":"contentSize"},"ports":[],"dynamicports":[],"children":[{"id":"e8900915-1794-a0f7-222f-fd400aa99938","type":"net.noodl.visual.icon","parameters":{"iconIconSource":{"class":"material-icons","code":"delete","codeAsClass":false},"iconColor":"#000000","iconSize":{"value":20,"unit":"px"}},"ports":[],"dynamicports":[],"children":[]}]}]},{"id":"90b724d6-3835-1c28-39c9-e9f4d41c7983","type":"Model2","x":-303.33333333333337,"y":15.666666666666686,"parameters":{"idSource":"foreach","properties":"name"},"ports":[],"dynamicports":[{"type":{"name":"*","allowConnectionsOnly":true},"plug":"input/output","group":"Properties","name":"prop-name","displayName":"name","index":7},{"type":"signal","plug":"output","group":"Changed Events","displayName":"name Changed","name":"changed-name","index":8}],"children":[]},{"id":"ab563d17-a568-5772-e440-8374f4b4c18b","type":"Switch","label":"Visible when hovering","x":189.5,"y":10.5,"parameters":{},"ports":[],"dynamicports":[],"children":[]},{"id":"af156f87-1d50-26ab-d249-e032bf9577a0","type":"Component Outputs","x":191.5,"y":199.5,"parameters":{},"ports":[{"name":"Request Delete","plug":"input","type":{"name":"*"},"index":1},{"name":"Request item view","plug":"input","type":{"name":"*"},"index":2}],"dynamicports":[],"children":[]}],"visualRoots":["059990a2-83f2-bf6a-e2c4-63ab0420a1f4"],"comments":[{"text":"Connect the desired data point in the Object to the Text in this list item","width":177,"height":171,"fill":"transparent","x":-317,"y":-64,"id":"c7451cdc-594e-e205-c090-92f295fe945f"}]}}],"settings":{"bodyScroll":true,"navigationPathType":"path"},"rootNodeId":"00476053-507d-cd5c-244f-dba586f58b72","version":"4","metadata":{"styles":{"text":{"Display":{"letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none","fontSize":{"value":"40","unit":"px"},"fontFamily":"fonts/Roboto/Roboto-Regular.ttf","color":"#000000"},"Headline":{"fontFamily":"fonts/Roboto/Roboto-Regular.ttf","fontSize":{"value":"32","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Title Large":{"fontFamily":"fonts/Roboto/Roboto-Bold.ttf","fontSize":{"value":"24","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120%","unit":"px"},"textTransform":"none"},"Title Medium":{"fontFamily":"fonts/Roboto/Roboto-Medium.ttf","fontSize":{"value":"20","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Title Small":{"fontFamily":"fonts/Roboto/Roboto-Bold.ttf","fontSize":{"value":"16","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Label Large":{"fontFamily":"fonts/Roboto/Roboto-Medium.ttf","fontSize":{"value":"16","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Label Medium":{"fontFamily":"fonts/Roboto/Roboto-Medium.ttf","fontSize":{"value":"14","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Label Small":{"fontFamily":"fonts/Roboto/Roboto-Medium.ttf","fontSize":{"value":"12","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"120","unit":"%"},"textTransform":"none"},"Body Large":{"fontFamily":"fonts/Roboto/Roboto-Regular.ttf","fontSize":{"value":"20","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"150","unit":"%"},"textTransform":"none"},"Body Medium":{"fontFamily":"fonts/Roboto/Roboto-Regular.ttf","fontSize":{"value":"16","unit":"px"},"color":"#000000","letterSpacing":"Auto","lineHeight":{"value":"150","unit":"%"},"textTransform":"none"},"Body Small":{"letterSpacing":"Auto","lineHeight":{"value":"150","unit":"%"},"textTransform":"none","fontFamily":"fonts/Roboto/Roboto-Regular.ttf","fontSize":{"value":"14","unit":"px"},"color":"#000000"}},"colors":{"Primary":"#5836F5","Primary Dark":"#3F22B8","Primary Subtle":"#C9BFFC","Primary Light":"#F7F5FF","Grey - 900":"#1F1F1F","Grey - 800":"#383838","Grey - 700":"#4C4C4C","Grey - 600":"#757575","Grey - 500":"#A5A5A5","Grey - 400":"#CECECE","Grey - 300":"#E9E9E9","Grey - 200":"#F4F4F4","Grey - 100":"#FBFBFB","Success":"#49AD7F","Notice":"#F2C441","Danger":"#F75A4F","White":"#FFFFFF","Black":"#000000"}}},"variants":[{"typename":"Text","parameters":{"textStyle":"Body Medium"},"stateParamaters":{},"stateTransitions":{}},{"typename":"net.noodl.controls.button","parameters":{"height":{"value":40,"unit":"px"},"sizeMode":"contentWidth","backgroundColor":"Primary","iconIconSource":{"class":"material-icons","code":"home"},"iconSpacing":{"value":8,"unit":"px"},"borderRadius":{"value":4,"unit":"px"},"textStyle":"Label Medium","paddingTop":{"value":0,"unit":"px"},"paddingLeft":{"value":24,"unit":"px"},"paddingRight":{"value":24,"unit":"px"},"paddingBottom":{"value":0,"unit":"px"},"color":"#FFFFFF","minWidth":{"value":80,"unit":"px"},"useIcon":false,"iconSize":{"value":20,"unit":"px"}},"stateParamaters":{"hover":{"backgroundColor":"Primary Dark"},"pressed":{"backgroundColor":"Primary","color":"White"},"disabled":{"backgroundColor":"Grey - 300","color":"Grey - 600"}},"stateTransitions":{},"defaultStateTransitions":{"neutral":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"hover":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"pressed":{"curve":[0,0,0.58,1],"dur":0,"delay":0}}},{"typename":"net.noodl.controls.textinput","parameters":{"useLabel":true,"sizeMode":"explicit","height":{"value":40,"unit":"px"},"textStyle":"Body Medium","borderStyle":"solid","borderRadius":{"value":4,"unit":"px"},"borderWidth":{"value":1,"unit":"px"},"borderColor":"Grey - 700","labeltextStyle":"Label Small","paddingLeft":{"value":12,"unit":"px"},"paddingRight":{"value":8,"unit":"px"},"labelSpacing":{"value":4,"unit":"px"},"placeholder":"Type here","color":"Grey - 900","placeHolderOpacity":0.65,"enabled":true,"blockTouch":false,"useIcon":false,"iconIconSource":{"class":"material-icons","code":"home"},"iconSize":{"value":20,"unit":"px"},"iconSpacing":{"value":4,"unit":"px"},"iconColor":"Grey - 700","labelcolor":"Grey - 700"},"stateParamaters":{"hover":{"labelcolor":"Grey - 700","borderColor":"Grey - 700","borderStyle":"solid","color":"Grey - 900"},"focused":{"borderColor":"Primary","labelcolor":"Primary","borderWidth":{"value":1,"unit":"px"},"boxShadowEnabled":false,"boxShadowColor":"Primary","borderStyle":"solid"},"disabled":{"labelcolor":"Grey - 500","backgroundColor":"Grey - 200","borderWidth":{"value":1,"unit":"px"},"borderColor":"Grey - 500","color":"Grey - 600"}},"stateTransitions":{},"defaultStateTransitions":{"neutral":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"focused":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"hover":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"disabled":{"curve":[0,0,0.58,1],"dur":0,"delay":0}}},{"typename":"net.noodl.controls.options","parameters":{"sizeMode":"explicit","height":{"value":40,"unit":"px"},"borderWidth":{"value":1,"unit":"px"},"borderRadius":{"value":4,"unit":"px"},"borderColor":"Grey - 700","boxShadowColor":"Dark Gray","useIcon":true,"iconIconSource":{"class":"material-icons","code":"expand_more"},"iconPlacement":"right","iconSize":{"value":20,"unit":"px"},"paddingRight":{"value":12,"unit":"px"},"textStyle":"Body Medium","paddingLeft":{"value":12,"unit":"px"},"marginTop":{"value":0,"unit":"px"},"width":{"value":100,"unit":"%"},"iconColor":"Grey - 700","placeholderOpacity":0.65,"placeholder":"Select option","useLabel":true,"labelSpacing":{"value":4,"unit":"px"},"labeltextStyle":"Label Small","labelcolor":"Grey - 700","items":"[\n    {\"Label\":\"Option 1\", \"Value\":\"1\"},\n    {\"Label\":\"Option 2\", \"Value\":\"2\"},\n    {\"Label\":\"Option 3\", \"Value\":\"3\"}\n]"},"stateParamaters":{"hover":{"borderColor":"Grey - 700","borderRadius":{"value":4,"unit":"px"},"iconColor":"Grey - 900","iconSize":{"value":20,"unit":"px"},"iconPlacement":"right","color":"Grey - 900","labelcolor":"Grey - 700"},"focused":{"borderColor":"Primary","boxShadowColor":"Primary","borderRadius":{"value":4,"unit":"px"},"useIcon":true,"iconColor":"Primary","iconIconSource":{"class":"material-icons","code":"keyboard_arrow_up"},"iconPlacement":"right","color":"Grey - 900","labelcolor":"Primary"},"pressed":{"borderRadius":{"value":4,"unit":"px"}},"disabled":{"labelcolor":"Grey - 500","iconColor":"Grey - 500","borderColor":"Grey - 500","color":"Grey - 600","backgroundColor":"Grey - 200"}},"stateTransitions":{},"defaultStateTransitions":{"neutral":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"focused":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"hover":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"pressed":{"curve":[0,0,0.58,1],"dur":0,"delay":0}}},{"typename":"net.noodl.controls.range","parameters":{"thumbColor":"Primary","thumbBorderRadius":{"value":100,"unit":"%"},"trackHeight":{"value":4,"unit":"px"},"trackActiveColor":"Primary","trackColor":"Primary Subtle","width":{"value":100,"unit":"%"},"trackBorderRadius":{"value":100,"unit":"px"},"thumbHeight":{"value":16,"unit":"px"},"thumbWidth":{"value":16,"unit":"px"}},"stateParamaters":{"hover":{"thumbColor":"Primary Dark","trackActiveColor":"Primary Dark"},"disabled":{"trackActiveColor":"Grey - 500","trackColor":"Grey - 300","thumbColor":"Grey - 500"}},"stateTransitions":{}},{"typename":"net.noodl.controls.checkbox","parameters":{"width":{"value":20,"unit":"px"},"height":{"value":20,"unit":"px"},"useIcon":false,"borderWidth":{"value":1,"unit":"px"},"useLabel":true,"labeltextStyle":"Body Medium","borderRadius":{"value":2,"unit":"px"},"borderColor":"Grey - 700","labelfontSize":{"value":16,"unit":"px"},"labelcolor":"Grey - 900","labelSpacing":{"value":12,"unit":"px"}},"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":"Grey - 700"},"pressed":{}},"stateTransitions":{},"defaultStateTransitions":{"neutral":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"hover":{"curve":[0,0,0.58,1],"dur":300,"delay":0},"checked":{"curve":[0,0,0.58,1],"dur":0,"delay":0}}},{"typename":"net.noodl.controls.radiobutton","parameters":{"width":{"value":20,"unit":"px"},"height":{"value":20,"unit":"px"},"useLabel":true,"labeltextStyle":"Body Large","borderWidth":{"value":1,"unit":"px"},"value":"0","useIcon":false,"fillColor":"transparent","borderColor":"Grey - 700","labelfontSize":{"value":16,"unit":"px"},"marginBottom":{"value":8,"unit":"px"},"labelcolor":"Grey - 900","labelSpacing":{"value":12,"unit":"px"}},"stateParamaters":{"checked":{"fillColor":"Primary","borderColor":"Primary","borderWidth":{"value":1,"unit":"px"},"backgroundColor":"transparent","width":{"value":20,"unit":"px"},"height":{"value":20,"unit":"px"},"fillSpacing":{"value":2,"unit":"px"}},"hover":{"backgroundColor":"transparent","borderColor":"Grey - 700","width":{"value":20,"unit":"px"},"height":{"value":20,"unit":"px"}},"disabled":{"borderColor":"Grey - 500","labelcolor":"Grey - 500","fillColor":"transparent"}},"stateTransitions":{},"defaultStateTransitions":{"neutral":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"hover":{"curve":[0,0,0.58,1],"dur":0,"delay":0},"checked":{"curve":[0,0,0.58,1],"dur":0,"delay":0}}}]}