Update new screen modal

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -82,8 +82,8 @@
   }
 
   const routeChanged = event => {
-    if (!event.target.value.startsWith("/")) {
+    if (!event.detail.startsWith("/")) {
-      route = "/" + event.target.value
+      route = "/" + event.detail
     }
   }
 </script>
@@ -92,24 +92,22 @@
   <Select
     label="Choose a Template"
     bind:value={templateIndex}
-    secondary
+    on:change={ev => templateChanged(ev.detail)}
-    on:change={ev => templateChanged(ev.target.value)}>
+    options={templates}
-    {#if templates}
+    placeholder={null}
-      {#each templates as template, index}
+    getOptionLabel={x => x.name}
-        <option value={index}>{template.name}</option>
+    getOptionValue={(x, idx) => idx} />
-      {/each}
-    {/if}
-  </Select>
   <Input label="Name" bind:value={name} />
   <Input
     label="Url"
     error={routeError}
     bind:value={route}
     on:change={routeChanged} />
-  <Select label="Access" bind:value={roleId} secondary>
+  <Select
-    {#each $roles as role}
+    label="Access"
-      <option value={role._id}>{role.name}</option>
+    bind:value={roleId}
-    {/each}
+    options={$roles}
-  </Select>
+    getOptionLabel={x => x.name}
-  <Toggle text="Create link in navigation bar" bind:checked={createLink} />
+    getOptionValue={x => x._id} />
+  <Toggle text="Create link in navigation bar" bind:value={createLink} />
 </ModalContent>