@umbraco-cms/backoffice 17.7.0 → 17.8.0-rc

package/dist-cms/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.js

@@ -5,18 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_LINK_PICKER_MODAL } from '../../link-picker-modal/link-picker-modal.token.js';
+import { UMB_LINK_PICKER_LINK_REF_SELECTOR } from '../link-picker-link-ref/constants.js';
 import { css, customElement, html, ifDefined, nothing, property, repeat, state, when, } from '../../../../external/lit/index.js';
 import { simpleHashCode } from '../../../../libs/observable-api/index.js';
 import { umbConfirmModal } from '../../../core/modal/index.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UmbDocumentItemRepository, UmbDocumentUrlRepository, UmbDocumentUrlsDataResolver, } from '../../../documents/documents/index.js';
-import { UmbMediaItemRepository, UmbMediaUrlRepository } from '../../../media/media/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 import { UmbSorterController } from '../../../core/sorter/index.js';
 import { UmbEntityInputInteractionMemoryManager } from '../../../core/entity/index.js';
 import { UmbInteractionMemoryScopeContext } from '../../../core/interaction-memory/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../core/validation/index.js';
+import '../link-picker-link-ref/link-picker-link-ref.element.js';
+import '../link-picker-link-ref/link-picker-document-ref.element.js';
+import '../link-picker-link-ref/link-picker-media-ref.element.js';
 /**
  * @element umb-input-multi-url
  * @fires change - when the value of the input changes
@@ -37,17 +39,11 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
         this.#urls = [...data]; // Unfreeze data coming from State, so we can manipulate it.
         super.value = this.#urls.map((x) => x.url).join(',');
         this.#sorter.setModel(this.#urls);
-        this.#populateLinksNameAndUrl();
     }
     get urls() {
         return this.#urls;
     }
     #urls;
-    #documentItemRepository;
-    #documentUrlRepository;
-    #documentUrlsDataResolver;
-    #mediaItemRepository;
-    #mediaUrlRepository;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}
@@ -95,7 +91,7 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
                 return this.#getUnique(modelEntry);
             },
             identifier: 'Umb.SorterIdentifier.InputMultiUrl',
-            itemSelector: 'uui-ref-node',
+            itemSelector: UMB_LINK_PICKER_LINK_REF_SELECTOR,
             containerSelector: 'uui-ref-list',
             onChange: ({ model }) => {
                 this.urls = model;
@@ -117,16 +113,9 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.#urls = [];
-        this.#documentItemRepository = new UmbDocumentItemRepository(this);
-        this.#documentUrlRepository = new UmbDocumentUrlRepository(this);
-        this.#documentUrlsDataResolver = new UmbDocumentUrlsDataResolver(this);
-        this.#mediaItemRepository = new UmbMediaItemRepository(this);
-        this.#mediaUrlRepository = new UmbMediaUrlRepository(this);
         this.#readonly = false;
         this.required = false;
         this.requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
-        this._resolvedLinkNames = [];
-        this._resolvedLinkUrls = [];
         // Holds what the link picker modal remembers between opens. The modal is rendered in the modal
         // portal, not as a descendant of this element, so context is the only channel that reaches it;
         // upwards it is a property and an `interaction-memories-change` event.
@@ -191,75 +180,24 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
             this._modalRoute = routeBuilder;
         });
     }
-    #populateLinksNameAndUrl() {
-        this._resolvedLinkNames = [];
-        this._resolvedLinkUrls = [];
-        // Documents and media have URLs saved in the local link format.
-        // Display the actual URL to align with what the user sees when they selected it initially.
-        this.#urls.forEach(async (link) => {
-            if (!link.unique)
-                return;
-            let name = undefined;
-            let url = undefined;
-            switch (link.type) {
-                case 'document': {
-                    if (!link.name || link.name.length === 0) {
-                        name = await this.#getNameForDocument(link.unique);
-                    }
-                    url = await this.#getUrlForDocument(link.unique);
-                    break;
-                }
-                case 'media': {
-                    if (!link.name || link.name.length === 0) {
-                        name = await this.#getNameForMedia(link.unique);
-                    }
-                    url = await this.#getUrlForMedia(link.unique);
-                    break;
-                }
-                default:
-                    break;
-            }
-            if (name) {
-                const resolvedName = { unique: link.unique, name };
-                this._resolvedLinkNames = [...this._resolvedLinkNames, resolvedName];
-            }
-            if (url) {
-                const resolvedUrl = { unique: link.unique, url };
-                this._resolvedLinkUrls = [...this._resolvedLinkUrls, resolvedUrl];
-            }
-        });
-    }
-    async #getUrlForDocument(unique) {
-        const { data: data } = await this.#documentUrlRepository.requestItems([unique]);
-        this.#documentUrlsDataResolver.setData(data?.[0]?.urls);
-        const resolvedUrls = await this.#documentUrlsDataResolver.getUrls();
-        return resolvedUrls?.[0]?.url ?? '';
-    }
-    async #getUrlForMedia(unique) {
-        const { data } = await this.#mediaUrlRepository.requestItems([unique]);
-        return data?.[0].url ?? '';
-    }
-    async #getNameForDocument(unique) {
-        const { data } = await this.#documentItemRepository.requestItems([unique]);
-        // TODO: [v17] Review usage of `item.variants[0].name` as this needs to be implemented properly! [LK]
-        return data?.[0]?.variants[0].name ?? '';
-    }
-    async #getNameForMedia(unique) {
-        const { data } = await this.#mediaItemRepository.requestItems([unique]);
-        return data?.[0]?.name ?? '';
-    }
-    async #requestRemoveItem(index, name) {
+    async #requestRemoveItem(index) {
         const item = this.#urls[index];
         if (!item)
             throw new Error('Could not find item at index: ' + index);
+        // The ref rendering the link is what knows the name it is displayed under, which is not
+        // necessarily the one the link carries.
+        const name = this.#getRefElement(item)?.displayName || item.name || 'item';
         await umbConfirmModal(this, {
             color: 'danger',
-            headline: `Remove ${name || item.name || 'item'}?`,
+            headline: `Remove ${name}?`,
             content: 'Are you sure you want to remove this item?',
             confirmLabel: '#general_remove',
         });
         this.#removeItem(index);
     }
+    #getRefElement(link) {
+        return this.shadowRoot?.getElementById(this.#getUnique(link));
+    }
     #removeItem(index) {
         this.urls.splice(index, 1);
         this.#dispatchChangeEvent();
@@ -284,15 +222,6 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
         this.requestUpdate();
         this.dispatchEvent(new UmbChangeEvent());
     }
-    #getResolvedItemName(link) {
-        return (link.name || this._resolvedLinkNames.find((name) => name.unique === link.unique)?.name) ?? '';
-    }
-    #getResolvedItemUrl(link) {
-        const baseUrl = link.culture
-            ? (link.url ?? '')
-            : (this._resolvedLinkUrls.find((url) => url.unique === link.unique)?.url ?? link.url ?? '');
-        return baseUrl + (link.queryString || '');
-    }
     render() {
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
     }
@@ -318,33 +247,56 @@ let UmbInputMultiUrlElement = class UmbInputMultiUrlElement extends UmbFormContr
             return;
         return html `
 			<uui-ref-list>
-				${repeat(this.urls, (link) => link.unique, (link, index) => this.#renderItem(link, index))}
+				${repeat(this.urls, (link) => this.#getUnique(link), (link, index) => this.#renderItem(link, index))}
 			</uui-ref-list>
 		`;
     }
     #renderItem(link, index) {
         const unique = this.#getUnique(link);
         const href = this.readonly ? undefined : (this._modalRoute?.({ index }) ?? undefined);
-        const name = this.#getResolvedItemName(link);
-        const url = this.#getResolvedItemUrl(link);
-        return html `
-			<uui-ref-node
-				id=${unique}
-				href=${ifDefined(href)}
-				name=${name || url}
-				detail=${ifDefined(name ? url : undefined)}
-				?readonly=${this.readonly}
-				?standalone=${this.max === 1 && this.urls?.length === 1}>
-				<umb-icon slot="icon" name=${link.icon || 'icon-link'}></umb-icon>
-				${when(!this.readonly, () => html `
-						<uui-action-bar slot="actions">
-							<uui-button
-								label=${this.localize.term('general_remove')}
-								@click=${() => this.#requestRemoveItem(index, name)}></uui-button>
-						</uui-action-bar>
-					`)}
-			</uui-ref-node>
-		`;
+        const standalone = this.max === 1 && this.urls?.length === 1;
+        const actions = when(!this.readonly, () => html `
+				<uui-action-bar slot="actions">
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						@click=${() => this.#requestRemoveItem(index)}></uui-button>
+				</uui-action-bar>
+			`);
+        switch (link.type) {
+            case 'document':
+                return html `
+					<umb-link-picker-document-ref
+						id=${unique}
+						.link=${link}
+						href=${ifDefined(href)}
+						?readonly=${this.readonly}
+						?standalone=${standalone}>
+						${actions}
+					</umb-link-picker-document-ref>
+				`;
+            case 'media':
+                return html `
+					<umb-link-picker-media-ref
+						id=${unique}
+						.link=${link}
+						href=${ifDefined(href)}
+						?readonly=${this.readonly}
+						?standalone=${standalone}>
+						${actions}
+					</umb-link-picker-media-ref>
+				`;
+            default:
+                return html `
+					<umb-link-picker-link-ref
+						id=${unique}
+						.link=${link}
+						href=${ifDefined(href)}
+						?readonly=${this.readonly}
+						?standalone=${standalone}>
+						${actions}
+					</umb-link-picker-link-ref>
+				`;
+        }
     }
     static { this.styles = [
         css `
@@ -398,12 +350,6 @@ __decorate([
 __decorate([
     state()
 ], UmbInputMultiUrlElement.prototype, "_modalRoute", void 0);
-__decorate([
-    state()
-], UmbInputMultiUrlElement.prototype, "_resolvedLinkNames", void 0);
-__decorate([
-    state()
-], UmbInputMultiUrlElement.prototype, "_resolvedLinkUrls", void 0);
 UmbInputMultiUrlElement = __decorate([
     customElement('umb-input-multi-url')
 ], UmbInputMultiUrlElement);

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/constants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Marks an element as one that renders a picked link. Every link ref carries it, whichever link type
+ * it was picked for, because the base element sets it on itself.
+ */
+export declare const UMB_LINK_PICKER_LINK_REF_ATTRIBUTE = "data-link-picker-link-ref";
+/**
+ * Matches every element that renders a picked link, whichever link type it was picked for, so
+ * consumers that address the rendered links as a group — a sorter, for instance — pick up new link
+ * types along with them.
+ */
+export declare const UMB_LINK_PICKER_LINK_REF_SELECTOR = "[data-link-picker-link-ref]";

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/constants.js

@@ -0,0 +1,11 @@
+/**
+ * Marks an element as one that renders a picked link. Every link ref carries it, whichever link type
+ * it was picked for, because the base element sets it on itself.
+ */
+export const UMB_LINK_PICKER_LINK_REF_ATTRIBUTE = 'data-link-picker-link-ref';
+/**
+ * Matches every element that renders a picked link, whichever link type it was picked for, so
+ * consumers that address the rendered links as a group — a sorter, for instance — pick up new link
+ * types along with them.
+ */
+export const UMB_LINK_PICKER_LINK_REF_SELECTOR = `[${UMB_LINK_PICKER_LINK_REF_ATTRIBUTE}]`;

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants.js';
+export type * from './types.js';
+export * from './link-picker-link-ref.element.js';
+export * from './link-picker-document-ref.element.js';
+export * from './link-picker-media-ref.element.js';

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/index.js

@@ -0,0 +1,4 @@
+export * from './constants.js';
+export * from './link-picker-link-ref.element.js';
+export * from './link-picker-document-ref.element.js';
+export * from './link-picker-media-ref.element.js';

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/link-picker-document-ref.element.d.ts

@@ -0,0 +1,31 @@
+import { UmbLinkPickerLinkRefElement } from './link-picker-link-ref.element.js';
+/**
+ * Renders a picked link to a document.
+ *
+ * A document link holds its URL in the local link format, so the URL is resolved from the document to
+ * show what the user saw when they picked it.
+ * @element umb-link-picker-document-ref
+ * @slot actions - The actions available for this link.
+ */
+export declare class UmbLinkPickerDocumentRefElement extends UmbLinkPickerLinkRefElement {
+    #private;
+    protected _requestName(unique: string): Promise<{
+        error: Error | import("../../../core/resources/index.js").UmbError | import("../../../core/resources/index.js").UmbCancelError | import("../../../core/resources/index.js").UmbApiError;
+        value?: undefined;
+    } | {
+        value: string | undefined;
+        error?: undefined;
+    }>;
+    protected _requestUrl(unique: string): Promise<{
+        error: Error | import("../../../core/resources/index.js").UmbError | import("../../../core/resources/index.js").UmbCancelError | import("../../../core/resources/index.js").UmbApiError;
+        value?: undefined;
+    } | {
+        value: string | undefined;
+        error?: undefined;
+    }>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-link-picker-document-ref': UmbLinkPickerDocumentRefElement;
+    }
+}

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/link-picker-document-ref.element.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbLinkPickerLinkRefElement } from './link-picker-link-ref.element.js';
+import { customElement } from '../../../../external/lit/index.js';
+import { UmbDocumentItemRepository, UmbDocumentUrlRepository, UmbDocumentUrlsDataResolver, } from '../../../documents/documents/index.js';
+/**
+ * Renders a picked link to a document.
+ *
+ * A document link holds its URL in the local link format, so the URL is resolved from the document to
+ * show what the user saw when they picked it.
+ * @element umb-link-picker-document-ref
+ * @slot actions - The actions available for this link.
+ */
+let UmbLinkPickerDocumentRefElement = class UmbLinkPickerDocumentRefElement extends UmbLinkPickerLinkRefElement {
+    #itemRepository = new UmbDocumentItemRepository(this);
+    #urlRepository = new UmbDocumentUrlRepository(this);
+    #urlsDataResolver = new UmbDocumentUrlsDataResolver(this);
+    async _requestName(unique) {
+        const { data, error } = await this.#itemRepository.requestItems([unique]);
+        if (error)
+            return { error };
+        // TODO: [v17] Review usage of `item.variants[0].name` as this needs to be implemented properly! [LK]
+        return { value: data?.[0]?.variants[0].name };
+    }
+    async _requestUrl(unique) {
+        const { data, error } = await this.#urlRepository.requestItems([unique]);
+        if (error)
+            return { error };
+        this.#urlsDataResolver.setData(data?.[0]?.urls);
+        const urls = await this.#urlsDataResolver.getUrls();
+        return { value: urls?.[0]?.url };
+    }
+};
+UmbLinkPickerDocumentRefElement = __decorate([
+    customElement('umb-link-picker-document-ref')
+], UmbLinkPickerDocumentRefElement);
+export { UmbLinkPickerDocumentRefElement };

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/link-picker-link-ref.element.d.ts

@@ -0,0 +1,83 @@
+import type { UmbLinkPickerLink } from '../../link-picker-modal/types.js';
+import type { UmbLinkPickerLinkRefLookup } from './types.js';
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+/**
+ * Renders a picked link as a reference node.
+ *
+ * A link that carries everything it displays needs no lookup and is rendered by this element as it is.
+ * A link type that points at an item whose name or URL has to be looked up extends this element and
+ * implements the lookups; each element holds on to what it resolved, so the list it sits in can render
+ * and re-order again without the same information being requested twice.
+ * @element umb-link-picker-link-ref
+ * @attr name - The name this link is displayed under. Set by the element, not by its consumer.
+ * @slot actions - The actions available for this link.
+ */
+export declare class UmbLinkPickerLinkRefElement extends UmbLitElement {
+    #private;
+    /**
+     * The link to render.
+     * @type {(UmbLinkPickerLink | undefined)}
+     */
+    set link(value: UmbLinkPickerLink | undefined);
+    get link(): UmbLinkPickerLink | undefined;
+    /**
+     * The location this link can be edited at, if it can be edited at all.
+     * @type {(string | undefined)}
+     * @attr
+     */
+    href?: string;
+    /**
+     * Renders the link without its actions and without a link to edit it.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Renders the link as the only one of its list.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    standalone: boolean;
+    /**
+     * The name this link is displayed under, which is the name it carries itself where it has one and
+     * the resolved name of the item it points at otherwise.
+     * @returns {string} The name shown for this link, or an empty string while it is still unknown.
+     */
+    get displayName(): string;
+    /**
+     * The URL this link is displayed with, which is the URL of the item it points at where that had to
+     * be resolved and the one it carries itself otherwise, plus any query string.
+     * @returns {string} The URL shown for this link, or an empty string while it is still unknown.
+     */
+    get displayUrl(): string;
+    protected _resolvedName?: string;
+    protected _resolvedUrl?: string;
+    /**
+     * Requests the name of the item this link points at. Resolves to nothing unless a link type that
+     * has a name to look up implements it.
+     * @param {string} _unique The unique of the item this link points at.
+     * @returns {Promise<UmbLinkPickerLinkRefLookup>} The name of the item, or the error that stopped
+     * it from being looked up.
+     */
+    protected _requestName(_unique: string): Promise<UmbLinkPickerLinkRefLookup>;
+    /**
+     * Requests the URL of the item this link points at. Resolves to nothing unless a link type that
+     * has a URL to look up implements it.
+     * @param {string} _unique The unique of the item this link points at.
+     * @returns {Promise<UmbLinkPickerLinkRefLookup>} The URL of the item, or the error that stopped it
+     * from being looked up.
+     */
+    protected _requestUrl(_unique: string): Promise<UmbLinkPickerLinkRefLookup>;
+    connectedCallback(): void;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    static readonly styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-link-picker-link-ref': UmbLinkPickerLinkRefElement;
+    }
+}

package/dist-cms/packages/multi-url-picker/components/link-picker-link-ref/link-picker-link-ref.element.js

@@ -0,0 +1,210 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UMB_LINK_PICKER_LINK_REF_ATTRIBUTE } from './constants.js';
+import { css, customElement, html, ifDefined, nothing, property, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+/**
+ * Renders a picked link as a reference node.
+ *
+ * A link that carries everything it displays needs no lookup and is rendered by this element as it is.
+ * A link type that points at an item whose name or URL has to be looked up extends this element and
+ * implements the lookups; each element holds on to what it resolved, so the list it sits in can render
+ * and re-order again without the same information being requested twice.
+ * @element umb-link-picker-link-ref
+ * @attr name - The name this link is displayed under. Set by the element, not by its consumer.
+ * @slot actions - The actions available for this link.
+ */
+let UmbLinkPickerLinkRefElement = class UmbLinkPickerLinkRefElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Renders the link without its actions and without a link to edit it.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Renders the link as the only one of its list.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.standalone = false;
+    }
+    #link;
+    /**
+     * The link to render.
+     * @type {(UmbLinkPickerLink | undefined)}
+     */
+    set link(value) {
+        this.#link = value;
+        this.#resolveName();
+        this.#resolveUrl();
+    }
+    get link() {
+        return this.#link;
+    }
+    /**
+     * The name this link is displayed under, which is the name it carries itself where it has one and
+     * the resolved name of the item it points at otherwise.
+     * @returns {string} The name shown for this link, or an empty string while it is still unknown.
+     */
+    get displayName() {
+        return this.#link?.name || this._resolvedName || '';
+    }
+    /**
+     * The URL this link is displayed with, which is the URL of the item it points at where that had to
+     * be resolved and the one it carries itself otherwise, plus any query string.
+     * @returns {string} The URL shown for this link, or an empty string while it is still unknown.
+     */
+    get displayUrl() {
+        const link = this.#link;
+        if (!link)
+            return '';
+        return (this._resolvedUrl ?? link.url ?? '') + (link.queryString || '');
+    }
+    // A link falls back to showing its URL until it has a name to show.
+    get #label() {
+        return this.displayName || this.displayUrl;
+    }
+    // What is looked up for a link is derived from its unique, so it is only looked up once per unique.
+    // A unique is marked before its lookup starts, so re-assigning the same link — which happens on
+    // every render of the list this element sits in, a re-order included — neither fires a second
+    // request nor waits for one. It is un-marked again only when the lookup could not be performed, so
+    // that one can be retried; a lookup that came back with nothing has answered and is not repeated.
+    #requestedName;
+    #requestedUrl;
+    async #resolveName() {
+        const link = this.#link;
+        const unique = link?.unique;
+        if (!unique)
+            return;
+        // A link that carries a name of its own is displayed under that, so there is nothing to look up.
+        if (link.name)
+            return;
+        if (unique === this.#requestedName)
+            return;
+        // Reaching here means this is a unique that has not been looked up, so anything resolved for the
+        // one before it no longer describes this link.
+        this._resolvedName = undefined;
+        this.#requestedName = unique;
+        const { value, error } = await this._requestName(unique);
+        if (this.#requestedName !== unique)
+            return;
+        if (error) {
+            this.#requestedName = undefined;
+            return;
+        }
+        this._resolvedName = value;
+    }
+    async #resolveUrl() {
+        const link = this.#link;
+        const unique = link?.unique;
+        if (!unique)
+            return;
+        // A link picked for a specific culture carries the URL of that culture already.
+        if (link.culture)
+            return;
+        if (unique === this.#requestedUrl)
+            return;
+        this._resolvedUrl = undefined;
+        this.#requestedUrl = unique;
+        const { value, error } = await this._requestUrl(unique);
+        if (this.#requestedUrl !== unique)
+            return;
+        if (error) {
+            this.#requestedUrl = undefined;
+            return;
+        }
+        this._resolvedUrl = value;
+    }
+    /**
+     * Requests the name of the item this link points at. Resolves to nothing unless a link type that
+     * has a name to look up implements it.
+     * @param {string} _unique The unique of the item this link points at.
+     * @returns {Promise<UmbLinkPickerLinkRefLookup>} The name of the item, or the error that stopped
+     * it from being looked up.
+     */
+    async _requestName(_unique) {
+        return {};
+    }
+    /**
+     * Requests the URL of the item this link points at. Resolves to nothing unless a link type that
+     * has a URL to look up implements it.
+     * @param {string} _unique The unique of the item this link points at.
+     * @returns {Promise<UmbLinkPickerLinkRefLookup>} The URL of the item, or the error that stopped it
+     * from being looked up.
+     */
+    async _requestUrl(_unique) {
+        return {};
+    }
+    // Marks this element as one of the link refs, so a consumer that addresses the rendered links as a
+    // group — the sorter of the list they sit in, for instance — reaches every link type, including the
+    // ones added after it. Set on connect rather than on first render, so it is already there when an
+    // observer of the list is notified of this element being inserted.
+    connectedCallback() {
+        super.connectedCallback();
+        this.toggleAttribute(UMB_LINK_PICKER_LINK_REF_ATTRIBUTE, true);
+    }
+    // The name is reflected onto this element rather than left on the ref node it renders, so that the
+    // element identified by the name is also the one the actions are slotted into — which is what a
+    // consumer addressing a link by its name and reaching for one of its actions relies on.
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.setAttribute('name', this.#label);
+    }
+    render() {
+        const link = this.#link;
+        if (!link)
+            return nothing;
+        const name = this.displayName;
+        return html `
+			<uui-ref-node
+				.name=${this.#label}
+				detail=${ifDefined(name ? this.displayUrl : undefined)}
+				href=${ifDefined(this.href)}
+				?readonly=${this.readonly}
+				?standalone=${this.standalone}>
+				<umb-icon slot="icon" name=${link.icon || 'icon-link'}></umb-icon>
+				<slot name="actions" slot="actions"></slot>
+			</uui-ref-node>
+		`;
+    }
+    static { this.styles = [
+        css `
+			/* A ref list draws its separators as absolutely positioned pseudo elements on the items it
+			   slots, so an item has to be a containing block of its own. */
+			:host {
+				display: block;
+				position: relative;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbLinkPickerLinkRefElement.prototype, "link", null);
+__decorate([
+    property({ type: String })
+], UmbLinkPickerLinkRefElement.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbLinkPickerLinkRefElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbLinkPickerLinkRefElement.prototype, "standalone", void 0);
+__decorate([
+    state()
+], UmbLinkPickerLinkRefElement.prototype, "_resolvedName", void 0);
+__decorate([
+    state()
+], UmbLinkPickerLinkRefElement.prototype, "_resolvedUrl", void 0);
+UmbLinkPickerLinkRefElement = __decorate([
+    customElement('umb-link-picker-link-ref')
+], UmbLinkPickerLinkRefElement);
+export { UmbLinkPickerLinkRefElement };