resource-select: use functions instead of events to override behaviour

This is inspired by how lion web components handle this, and much cleaner.

packages/resource-select/README.md

@@ -39,13 +39,15 @@ Or directly via CDN:
     - 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
 
+## Override Properties
+
+- `buildUrl` - A function which takes the select and the base URL, can return a
+  different URL for fetching the list of resources.
+- `formatResource` - A function which takes the select and a resource, should
+  return the text used for displaying the resource.
+
 ## 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

packages/resource-select/src/dbp-resource-select-demo.js

@@ -78,17 +78,15 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     render() {
-        let buildUrl = (event) => {
-            let select = event.target;
-            let url = new URL(select.resourcePath, select.entryPointUrl).href;
+        let buildUrl = (select, url) => {
             url += '/' + encodeURIComponent(select.auth['person-id']);
             url += '/organizations';
             url += '?' + new URLSearchParams({lang: select.lang}).toString();
-            event.detail.url = url;
+            return url;
         };
 
-        let formatResource = (event) => {
-            event.detail.text = event.detail.object.name;
+        let formatResource = (select, resource) => {
+            return resource['name'];
         };
 
         let change = (event) => {
@@ -113,8 +111,8 @@ export class ResourceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
                                     entry-point-url="${this.entryPointUrl}"
                                     resource-path="base/people"
                                     @change="${change}"
-                                    @build-url="${buildUrl}"
-                                    @format-resource="${formatResource}"></dbp-resource-select>
+                                    .buildUrl="${buildUrl}"
+                                    .formatResource="${formatResource}"></dbp-resource-select>
                             </div>
                         </div>
                     </form>

packages/resource-select/src/resource-select.js

@@ -86,6 +86,14 @@ export class ResourceSelect extends AdapterLitElement {
         }
     }
 
+    buildUrl(select, url) {
+        return url;
+    }
+
+    formatResource(select, resource) {
+        return resource.name ?? resource['@id'];
+    }
+
     _getUrl() {
         if (this.entryPointUrl === null) {
             return null;
@@ -94,26 +102,12 @@ export class ResourceSelect extends AdapterLitElement {
         if (this.resourcePath !== null) {
             url = new URL(this.resourcePath, this.entryPointUrl).href;
         }
-        let detail = {
-            url: url,
-        };
-        const event = new CustomEvent('build-url', {
-            detail: detail,
-        });
-        this.dispatchEvent(event);
-        return detail.url;
+        url = this.buildUrl(this, url);
+        return url;
     }
 
     _getText(resource) {
-        let detail = {
-            text: resource.name ?? null,
-            object: resource,
-        };
-        const event = new CustomEvent('format-resource', {
-            detail: detail,
-        });
-        this.dispatchEvent(event);
-        return detail.text;
+        return this.formatResource(this, resource);
     }
 
     _setValue(value) {