Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# Resource Select Web Component
You can install this component via npm:
```bash
npm i @dbp-toolkit/resource-select
```
## Usage
```html
<dbp-resource-select></dbp-resource-select>
<script type="module" src="node_modules/@dbp-toolkit/resource-select/dist/dbp-resource-select.js"></script>
```
Or directly via CDN:
```html
<dbp-resource-select></dbp-resource-select>
<script type="module" src="https://unpkg.com/@dbp-toolkit/resource-select@latest/dist/dbp-resource-select.js"></script>
```
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-resource-select lang="de"></dbp-resource-select>`
- `entry-point-url`: entry point url to access the api
- example `<dbp-resource-select entry-point-url="http://127.0.0.1:8000"></dbp-resource-select>`
- `resource-path` (optional): path to the resource
- example `<dbp-resource-select resource-path="base/people"></dbp-resource-select>`
- `value` (optional): api path of recource to preload the selector with
- example `<dbp-resource-select value="/base/people/testuser"></dbp-resource-select>`
- the `value` will also be set automatically when an organization is chosen in the selector
## Properties
- `valueObject` (optional): The resource object corresponding to `value`
- `auth` {object}: you need to set that object property for the auth token
- example auth property: `{token: "THE_BEARER_TOKEN"}`
- note: most often this should be a property that is not set directly, but subscribed at a provider
## Events
- `change` - Gets dispatched when either `value` or `valueObject` change.
- `event.detail.value` - Same as the `value` property
- `event.detail.object` - Same as the `valueObject` property
- `build-url` - Gets dispatched when during URL building.
- `event.detail.url` - Set this to the URL representing the collection endpoint
- `format-resource` - Gets dispatched when creating the display test for earch resource.
- `event.detail.object` - The resource that which should be represented by the text
- `event.detail.text` - Set this to the text that should be displayed