diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts index a0ae8323e4fc..d4a1f4bd755e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts @@ -1,11 +1,12 @@ import type { UmbCollectionItemModel } from '../types.js'; +import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js'; import { getItemFallbackName, getItemFallbackIcon } from '@umbraco-cms/backoffice/entity-item'; import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; -import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, ifDefined, nothing, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-default-collection-item-card') -export class UmbDefaultCollectionItemCardElement extends UmbLitElement { +export class UmbDefaultCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement { @property({ type: Object }) item?: UmbCollectionItemModel; @@ -42,7 +43,7 @@ export class UmbDefaultCollectionItemCardElement extends UmbLitElement { return html` ; - #item?: UmbCollectionItemModel; - - @state() - private _component?: any; // TODO: Add type - - @property({ type: Object, attribute: false }) - public set item(value: UmbCollectionItemModel | undefined) { - const oldValue = this.#item; - this.#item = value; - - if (value === oldValue) return; - if (!value) return; - - // If the component is already created and the entity type is the same, we can just update the item. - if (this._component && value.entityType === oldValue?.entityType) { - this._component.item = value; - return; - } - - this.#pathAddendum.setAddendum('collection-item-card/' + value.entityType + '/' + value.unique); - - // If the component is already created, but the entity type is different, we need to destroy the component. - this.#createController(value.entityType); - } - public get item(): UmbCollectionItemModel | undefined { - return this.#item; - } - - #selectable = false; - @property({ type: Boolean, reflect: true }) - public get selectable() { - return this.#selectable; - } - public set selectable(value) { - this.#selectable = value; - - if (this._component) { - this._component.selectable = this.#selectable; - } - } - - #selectOnly = false; - @property({ type: Boolean, attribute: 'select-only', reflect: true }) - public get selectOnly() { - return this.#selectOnly; - } - public set selectOnly(value) { - this.#selectOnly = value; - - if (this._component) { - this._component.selectOnly = this.#selectOnly; - } - } - - #selected = false; - @property({ type: Boolean, reflect: true }) - public get selected() { - return this.#selected; - } - public set selected(value) { - this.#selected = value; - - if (this._component) { - this._component.selected = this.#selected; - } - } - - #disabled = false; - @property({ type: Boolean, reflect: true }) - public get disabled() { - return this.#disabled; +export class UmbEntityCollectionItemCardElement extends UmbEntityCollectionItemElementBase { + protected getExtensionType(): string { + return 'entityCollectionItemCard'; } - public set disabled(value) { - this.#disabled = value; - if (this._component) { - this._component.disabled = this.#disabled; - } + protected createFallbackElement(): HTMLElement { + return new UmbDefaultCollectionItemCardElement(); } - #href?: string; - @property({ type: String, reflect: true }) - public get href() { - return this.#href; + protected getPathAddendum(entityType: string, unique: string): string { + return 'collection-item-card/' + entityType + '/' + unique; } - public set href(value) { - this.#href = value; - if (this._component) { - this._component.href = this.#href; - } - } - - #detailProperties?: Array; - @property({ type: Array, attribute: false }) - public get detailProperties() { - return this.#detailProperties; - } - public set detailProperties(value) { - this.#detailProperties = value; - - if (this._component) { - this._component.detailProperties = this.#detailProperties; - } - } - - #pathAddendum = new UmbRoutePathAddendumContext(this); - - #onSelected(event: UmbSelectedEvent) { - event.stopPropagation(); - const unique = this.item?.unique; - if (!unique) throw new Error('No unique id found for item'); - this.dispatchEvent(new UmbSelectedEvent(unique)); - } - - #onDeselected(event: UmbDeselectedEvent) { - event.stopPropagation(); - const unique = this.item?.unique; - if (!unique) throw new Error('No unique id found for item'); - this.dispatchEvent(new UmbDeselectedEvent(unique)); - } - - protected override firstUpdated(_changedProperties: PropertyValueMap | Map): void { - super.firstUpdated(_changedProperties); - this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'entity-collection-item-card'); - } - - #boundOnSelected = this.#onSelected.bind(this); - #boundOnDeselected = this.#onDeselected.bind(this); - - #createController(entityType: string) { - if (this.#extensionsController) { - this.#extensionsController.destroy(); - } - - this.#extensionsController = new UmbExtensionsElementInitializer( - this, - umbExtensionsRegistry, - 'entityCollectionItemCard', - (manifest: ManifestEntityCollectionItemCard) => manifest.forEntityTypes.includes(entityType), - (extensionControllers) => { - this._component?.remove(); - const component = - extensionControllers[0]?.component || document.createElement('umb-default-collection-item-card'); - - // TODO: I would say this code can use feature of the UmbExtensionsElementInitializer, to set properties and get a fallback element. [NL] - // assign the properties to the component - component.item = this.item; - component.selectable = this.selectable; - component.selectOnly = this.selectOnly; - component.selected = this.selected; - component.disabled = this.disabled; - component.href = this.href; - component.detailProperties = this.detailProperties; - - component.addEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected); - component.addEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected); - - // Proxy the actions slot to the component - const slotElement = document.createElement('slot'); - slotElement.name = 'actions'; - slotElement.setAttribute('slot', 'actions'); - component.appendChild(slotElement); - - this._component = component; - }, - undefined, // We can leave the alias to undefined, as we destroy this ourselves. - undefined, - { single: true }, - ); + protected getMarkAttributeName(): string { + return 'entity-collection-item-card'; } override render() { return html`${this._component}`; } - override destroy(): void { - this._component?.removeEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected); - this._component?.removeEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected); - super.destroy(); - } - static override styles = [ css` :host { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.extension.ts index 7d2da5f2bfca..a72348ec1d34 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.extension.ts @@ -1,12 +1,9 @@ -import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; +import type { ManifestEntityCollectionItemBase } from '../entity-collection-item.extension.js'; export interface ManifestEntityCollectionItemCard< MetaType extends MetaEntityCollectionItemCard = MetaEntityCollectionItemCard, -> extends ManifestElement, - ManifestWithDynamicConditions { +> extends ManifestEntityCollectionItemBase { type: 'entityCollectionItemCard'; - meta: MetaType; - forEntityTypes: Array; } // eslint-disable-next-line @typescript-eslint/no-empty-object-type diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-element.interface.ts new file mode 100644 index 000000000000..0b6f076383d2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-element.interface.ts @@ -0,0 +1,24 @@ +import type { UmbCollectionItemModel } from './types.js'; + +/** + * An interface for elements that render collection items representing entities. + */ +export interface UmbEntityCollectionItemElement extends HTMLElement { + /** The collection item model to render. */ + item?: UmbCollectionItemModel | undefined; + + /** Whether the item should render with selection affordances. */ + selectable?: boolean; + + /** When true, the item only supports selection (no navigation). */ + selectOnly?: boolean; + + /** Whether the item is currently selected. */ + selected?: boolean; + + /** Whether the item is disabled. */ + disabled?: boolean; + + /** Optional href used by card/ref renderers to provide a link. */ + href?: string | undefined; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.ts new file mode 100644 index 000000000000..1ec6db16279e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.ts @@ -0,0 +1,67 @@ +import type { UmbCollectionItemModel } from '../types.js'; +import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js'; +import { getItemFallbackName, getItemFallbackIcon } from '@umbraco-cms/backoffice/entity-item'; +import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; +import { customElement, html, ifDefined, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; + +@customElement('umb-default-collection-item-ref') +export class UmbDefaultCollectionItemRefElement extends UmbLitElement implements UmbEntityCollectionItemElement { + @property({ type: Object }) + item?: UmbCollectionItemModel; + + @property({ type: Boolean }) + selectable = false; + + @property({ type: Boolean }) + selected = false; + + @property({ type: Boolean }) + selectOnly = false; + + @property({ type: Boolean }) + disabled = false; + + @property({ type: String }) + href?: string; + + #onSelected(event: CustomEvent) { + if (!this.item) return; + event.stopPropagation(); + this.dispatchEvent(new UmbSelectedEvent(this.item.unique)); + } + + #onDeselected(event: CustomEvent) { + if (!this.item) return; + event.stopPropagation(); + this.dispatchEvent(new UmbDeselectedEvent(this.item.unique)); + } + + override render() { + if (!this.item) return nothing; + + return html` + + ${this.#renderIcon(this.item)} + `; + } + + #renderIcon(item: UmbCollectionItemModel) { + const icon = item.icon || getItemFallbackIcon(); + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-default-collection-item-ref': UmbDefaultCollectionItemRefElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.element.ts new file mode 100644 index 000000000000..316dc3d24716 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.element.ts @@ -0,0 +1,41 @@ +import { UmbEntityCollectionItemElementBase } from '../umb-entity-collection-item-element-base.element.js'; +import { UmbDefaultCollectionItemRefElement } from './default-collection-item-ref.element.js'; +import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit'; + +@customElement('umb-entity-collection-item-ref') +export class UmbEntityCollectionItemRefElement extends UmbEntityCollectionItemElementBase { + protected getExtensionType(): string { + return 'entityCollectionItemRef'; + } + + protected createFallbackElement(): HTMLElement { + return new UmbDefaultCollectionItemRefElement(); + } + + protected getPathAddendum(entityType: string, unique: string): string { + return 'collection-item-ref/' + entityType + '/' + unique; + } + + protected getMarkAttributeName(): string { + return 'entity-collection-item-ref'; + } + + override render() { + return html`${this._component}`; + } + + static override styles = [ + css` + :host { + display: block; + position: relative; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-entity-collection-item-ref': UmbEntityCollectionItemRefElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.extension.ts new file mode 100644 index 000000000000..0d3234176171 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.extension.ts @@ -0,0 +1,16 @@ +import type { ManifestEntityCollectionItemBase } from '../entity-collection-item.extension.js'; + +export interface ManifestEntityCollectionItemRef< + MetaType extends MetaEntityCollectionItemRef = MetaEntityCollectionItemRef, +> extends ManifestEntityCollectionItemBase { + type: 'entityCollectionItemRef'; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface MetaEntityCollectionItemRef {} + +declare global { + interface UmbExtensionManifestMap { + umbManifestEntityCollectionItemRef: ManifestEntityCollectionItemRef; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/global-components.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/global-components.ts new file mode 100644 index 000000000000..4636687bd2ab --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/global-components.ts @@ -0,0 +1 @@ +import './entity-collection-item-ref.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/index.ts new file mode 100644 index 000000000000..057c629abb5e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/index.ts @@ -0,0 +1 @@ +export * from './entity-collection-item-ref.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/types.ts new file mode 100644 index 000000000000..cd88329aeecc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/types.ts @@ -0,0 +1 @@ +export type * from './entity-collection-item-ref.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item.extension.ts new file mode 100644 index 000000000000..9ad5af751c14 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item.extension.ts @@ -0,0 +1,20 @@ +import type { UmbEntityCollectionItemElement } from './entity-collection-item-element.interface.js'; +import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api'; + +/** + * Base interface for entity collection item manifests. + * Shared by card and ref variants. + */ +export interface ManifestEntityCollectionItemBase + extends ManifestElement, + ManifestWithDynamicConditions { + /** + * The entity types this collection item supports. + */ + forEntityTypes: Array; + + /** + * Additional metadata for the collection item. + */ + meta?: MetaType; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/global-components.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/global-components.ts index 8a5109c75c8f..7e1a04b92b0b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/global-components.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/global-components.ts @@ -1 +1,2 @@ import './entity-collection-item-card/global-components.js'; +import './entity-collection-item-ref/global-components.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts index d6bb4a00a44c..e96639948a0a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts @@ -1,5 +1,7 @@ import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; export type * from './entity-collection-item-card/types.js'; +export type * from './entity-collection-item-ref/types.js'; +export type * from './entity-collection-item-element.interface.js'; export interface UmbCollectionItemModel extends UmbEntityModel { unique: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/umb-entity-collection-item-element-base.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/umb-entity-collection-item-element-base.element.ts new file mode 100644 index 000000000000..a021e2304427 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/item/umb-entity-collection-item-element-base.element.ts @@ -0,0 +1,198 @@ +import type { UmbCollectionItemDetailPropertyConfig, UmbCollectionItemModel } from './types.js'; +import type { ManifestEntityCollectionItemBase } from './entity-collection-item.extension.js'; +import { property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbExtensionsElementInitializer } from '@umbraco-cms/backoffice/extension-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; +import { UmbRoutePathAddendumContext } from '@umbraco-cms/backoffice/router'; +import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const'; +import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit'; + +export abstract class UmbEntityCollectionItemElementBase extends UmbLitElement { + #extensionsController?: UmbExtensionsElementInitializer; + #item?: UmbCollectionItemModel; + + @state() + protected _component?: any; // TODO: Add type + + @property({ type: Object, attribute: false }) + public set item(value: UmbCollectionItemModel | undefined) { + const oldValue = this.#item; + this.#item = value; + + if (value === oldValue) return; + if (!value) return; + + // If the component is already created and the entity type is the same, we can just update the item. + if (this._component && value.entityType === oldValue?.entityType) { + this._component.item = value; + return; + } + + this.#pathAddendum.setAddendum(this.getPathAddendum(value.entityType, value.unique)); + + // If the component is already created, but the entity type is different, we need to destroy the component. + this.#createController(value.entityType); + } + public get item(): UmbCollectionItemModel | undefined { + return this.#item; + } + + #selectable = false; + @property({ type: Boolean, reflect: true }) + public get selectable() { + return this.#selectable; + } + public set selectable(value) { + this.#selectable = value; + + if (this._component) { + this._component.selectable = this.#selectable; + } + } + + #selectOnly = false; + @property({ type: Boolean, attribute: 'select-only', reflect: true }) + public get selectOnly() { + return this.#selectOnly; + } + public set selectOnly(value) { + this.#selectOnly = value; + + if (this._component) { + this._component.selectOnly = this.#selectOnly; + } + } + + #selected = false; + @property({ type: Boolean, reflect: true }) + public get selected() { + return this.#selected; + } + public set selected(value) { + this.#selected = value; + + if (this._component) { + this._component.selected = this.#selected; + } + } + + #disabled = false; + @property({ type: Boolean, reflect: true }) + public get disabled() { + return this.#disabled; + } + public set disabled(value) { + this.#disabled = value; + + if (this._component) { + this._component.disabled = this.#disabled; + } + } + + #href?: string; + @property({ type: String, reflect: true }) + public get href() { + return this.#href; + } + public set href(value) { + this.#href = value; + + if (this._component) { + this._component.href = this.#href; + } + } + + #detailProperties?: Array; + @property({ type: Array, attribute: false }) + public get detailProperties() { + return this.#detailProperties; + } + public set detailProperties(value) { + this.#detailProperties = value; + + if (this._component) { + this._component.detailProperties = this.#detailProperties; + } + } + + #pathAddendum = new UmbRoutePathAddendumContext(this); + + #onSelected(event: UmbSelectedEvent) { + event.stopPropagation(); + const unique = this.item?.unique; + if (!unique) throw new Error('No unique id found for item'); + this.dispatchEvent(new UmbSelectedEvent(unique)); + } + + #onDeselected(event: UmbDeselectedEvent) { + event.stopPropagation(); + const unique = this.item?.unique; + if (!unique) throw new Error('No unique id found for item'); + this.dispatchEvent(new UmbDeselectedEvent(unique)); + } + + protected override firstUpdated(_changedProperties: PropertyValueMap | Map): void { + super.firstUpdated(_changedProperties); + this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, this.getMarkAttributeName()); + } + + #boundOnSelected = this.#onSelected.bind(this); + #boundOnDeselected = this.#onDeselected.bind(this); + + #createController(entityType: string) { + if (this.#extensionsController) { + this.#extensionsController.destroy(); + } + + this.#extensionsController = new UmbExtensionsElementInitializer( + this, + umbExtensionsRegistry, + this.getExtensionType(), + (manifest: ManifestEntityCollectionItemBase) => manifest.forEntityTypes.includes(entityType), + (extensionControllers) => { + this._component?.remove(); + const component = extensionControllers[0]?.component || this.createFallbackElement(); + + // TODO: I would say this code can use feature of the UmbExtensionsElementInitializer, to set properties and get a fallback element. [NL] + // assign the properties to the component + component.item = this.item; + component.selectable = this.selectable; + component.selectOnly = this.selectOnly; + component.selected = this.selected; + component.disabled = this.disabled; + component.href = this.href; + component.detailProperties = this.detailProperties; + + component.addEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected); + component.addEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected); + + // Proxy the actions slot to the component + const slotElement = document.createElement('slot'); + slotElement.name = 'actions'; + slotElement.setAttribute('slot', 'actions'); + component.appendChild(slotElement); + + this._component = component; + }, + undefined, // We can leave the alias to undefined, as we destroy this ourselves. + undefined, + { single: true }, + ); + } + + override destroy(): void { + this._component?.removeEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected); + this._component?.removeEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected); + super.destroy(); + } + + /** + * Abstract methods that subclasses must implement + */ + protected abstract getExtensionType(): string; + protected abstract createFallbackElement(): HTMLElement; + protected abstract getPathAddendum(entityType: string, unique: string): string; + protected abstract getMarkAttributeName(): string; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts index 71c619c6f731..e0ceb16b9ec5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts @@ -1,13 +1,16 @@ import type { UmbDocumentCollectionItemModel } from './types.js'; -import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, ifDefined, nothing, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event'; -import type { UmbCollectionItemDetailPropertyConfig } from '@umbraco-cms/backoffice/collection'; +import type { + UmbCollectionItemDetailPropertyConfig, + UmbEntityCollectionItemElement, +} from '@umbraco-cms/backoffice/collection'; import './document-grid-collection-card.element.js'; @customElement('umb-document-collection-item-card') -export class UmbDocumentCollectionItemCardElement extends UmbLitElement { +export class UmbDocumentCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement { #item?: UmbDocumentCollectionItemModel | undefined; @property({ type: Object }) @@ -52,7 +55,7 @@ export class UmbDocumentCollectionItemCardElement extends UmbLitElement { if (!this.item) return nothing; return html`