# NodeSelector

Generic wrapper for Sitevision [input components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components) used for selecting nodes.

Prefer the specialized wrappers for ordinary usage:

* [PageSelector](/packages/config-svelte/components/pageselector)
* [FileSelector](/packages/config-svelte/components/fileselector)
* [ImageSelector](/packages/config-svelte/components/imageselector)
* [UserSelector](/packages/config-svelte/components/userselector)
* [ContentNodeSelector](/packages/config-svelte/components/contentnodeselector)
* [LinkSelector](/packages/config-svelte/components/linkselector)

Use `NodeSelector` when you need to configure the selector component directly.

## Example

```svelte
<script>
  import { NodeSelector } from '@soleil-se/config-svelte';
</script>


<NodeSelector name="node" component="content-node" label="Innehåll" />
```

## Props

| Prop                   | Type                                                                                                   | Description                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| `component`required    | `string`Mer information```ts
'page' | 'file' | 'image' | 'user' | 'content-node' | 'link' | string
``` | Sitevision component.                                                                                             |
| `label`required        | `string \| Snippet`                                                                                    | Field label, a string or Svelte snippet.                                                                          |
| `value`$bindable       | `string`                                                                                               | Selected node ID. An initial Sitevision node object from the configuration is normalized to its ID.               |
| `displayName`$bindable | `string`                                                                                               | Display name of the selected node, initialized from the configuration node’s display name or path when available. |
| `name`                 | `string`                                                                                               | Configuration key and HTML name attribute.                                                                        |
| `types`                | `string \| string[]`                                                                                   | Restricts selectable node types.                                                                                  |
| `description`          | `string \| Snippet`                                                                                    | Description shown below the field, a string or Svelte snippet.                                                    |
| `required`             | `boolean`                                                                                              | Set the field as required.**Default:** `false`                                                                    |
| `disabled`             | `boolean`                                                                                              | Disables the field.**Default:** `false`                                                                           |
| `removable`            | `boolean`                                                                                              | Whether the value can be cleared.**Default:** `true`                                                              |
| `show`                 | `boolean`                                                                                              | Shows or hides the selector without destroying it.**Default:** `true`                                             |
| `class`                | `string`                                                                                               | CSS class added to the form-group wrapper.                                                                        |
| `children`             | `Snippet`                                                                                              | Content rendered after the selector and validation message.                                                       |
| `onChange`             | `function`Mer information```ts
(value: string, event: Event) => void
```                               | Called on a selection change.                                                                                     |
| `validate`             | `function`Mer information```ts
(context: ValidationContext<string>) => ValidationResult
```            | Custom validator.                                                                                                 |

## Validation

By default, the component applies standard required-field validation. A custom `validate` prop replaces that default and returns `{ success: boolean, message?: string }`.\
Validation errors are displayed below the component and prevent saving.

See [validation](/packages/config-svelte/#validation) for more details.

The selector also reports if a saved node is marked as trashed or removed. Selecting another node clears that flag.\
Validation errors are displayed below the selector and prevent saving.

For file-type validation with `accept`, use [FileSelector](/packages/config-svelte/components/fileselector).

## Snippets

`label` and `description` accept text or Svelte snippets.\
Default child content is rendered after the selector and validation message.

**App.svelte**

```svelte
<script>
  import { NodeSelector } from '@soleil-se/config-svelte';
</script>


<NodeSelector name="node" component="image">
  {#snippet label()}
    Välj <strong>innehåll</strong>
  {/snippet}
  {#snippet description()}
    Innehåll som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</NodeSelector>
```