@umbraco-cms/backoffice 16.3.0-rc3 → 17.0.0-beta

package/dist-cms/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.js

@@ -0,0 +1,155 @@
+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 { UmbDocumentItemDataResolver } from '../../../item/document-item-data-resolver.js';
+import { css, customElement, html, property, repeat, state, when } from '../../../../../../external/lit/index.js';
+import { fromCamelCase } from '../../../../../core/utils/index.js';
+import { DocumentVariantStateModel } from '../../../../../core/backend-api/index.js';
+import { UmbElementMixin } from '../../../../../../libs/element-api/index.js';
+import { UUICardContentNodeElement } from '../../../../../../external/uui/index.js';
+let UmbDocumentGridCollectionCardElement = class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) {
+    #resolver = new UmbDocumentItemDataResolver(this);
+    set item(value) {
+        this.#item = value;
+        if (value) {
+            this.#resolver.setData(value);
+        }
+    }
+    get item() {
+        return this.#item;
+    }
+    #item;
+    constructor() {
+        super();
+        this.#resolver.observe(this.#resolver.name, (name) => (this.name = name || ''));
+        this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || ''));
+        this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate));
+        this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate));
+    }
+    #getPropertyValueByAlias(alias) {
+        switch (alias) {
+            case 'contentTypeAlias':
+                return this.item.documentType.alias;
+            case 'createDate':
+                return this._createDate?.toLocaleString();
+            case 'creator':
+            case 'owner':
+                return this.item.creator;
+            case 'name':
+                return this.name;
+            case 'state':
+                return this._state ? fromCamelCase(this._state) : '';
+            case 'published':
+                return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False';
+            case 'sortOrder':
+                return this.item.sortOrder;
+            case 'updateDate':
+                return this._updateDate?.toLocaleString();
+            case 'updater':
+                return this.item.updater;
+            default: {
+                const culture = this.#resolver.getCulture();
+                const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture));
+                return prop?.value ?? '';
+            }
+        }
+    }
+    #getStateTagConfig() {
+        if (!this._state)
+            return;
+        switch (this._state) {
+            case DocumentVariantStateModel.PUBLISHED:
+                return { color: 'positive', label: this.localize.term('content_published') };
+            case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES:
+                return { color: 'warning', label: this.localize.term('content_publishedPendingChanges') };
+            case DocumentVariantStateModel.DRAFT:
+                return { color: 'default', label: this.localize.term('content_unpublished') };
+            case DocumentVariantStateModel.NOT_CREATED:
+                return { color: 'danger', label: this.localize.term('content_notCreated') };
+            default:
+                return { color: 'danger', label: fromCamelCase(this._state) };
+        }
+    }
+    render() {
+        return html `${super.render()} ${this.#renderState()}`;
+    }
+    renderDetail() {
+        return html `
+			${super.renderDetail()}
+			<div id="properties">${this.#renderProperties()}</div>
+		`;
+    }
+    #renderState() {
+        const tagConfig = this.#getStateTagConfig();
+        if (!tagConfig)
+            return;
+        return html `<uui-tag id="state" color=${tagConfig.color} look="secondary">${tagConfig.label}</uui-tag>`;
+    }
+    #renderProperties() {
+        if (!this.columns)
+            return;
+        return html `
+			<ul>
+				${repeat(this.columns, (column) => column.alias, (column) => this.#renderProperty(column))}
+			</ul>
+		`;
+    }
+    #renderProperty(column) {
+        const value = this.#getPropertyValueByAlias(column.alias);
+        return html `
+			<li>
+				<span>${this.localize.string(column.header)}:</span>
+				${when(column.nameTemplate, () => html `<umb-ufm-render inline .markdown=${column.nameTemplate} .value=${{ value }}></umb-ufm-render>`, () => html `${value}`)}
+			</li>
+		`;
+    }
+    static { this.styles = [
+        ...UUICardContentNodeElement.styles,
+        css `
+			#state {
+				position: absolute;
+				top: var(--uui-size-4);
+				right: var(--uui-size-4);
+				display: flex;
+				justify-content: right;
+			}
+
+			#properties {
+				font-size: var(--uui-type-small-size);
+				line-height: calc(2 * var(--uui-size-3));
+
+				> ul {
+					list-style: none;
+					padding-inline-start: 0px;
+					margin: 0;
+
+					> li > span {
+						font-weight: 700;
+					}
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbDocumentGridCollectionCardElement.prototype, "_createDate", void 0);
+__decorate([
+    state()
+], UmbDocumentGridCollectionCardElement.prototype, "_state", void 0);
+__decorate([
+    state()
+], UmbDocumentGridCollectionCardElement.prototype, "_updateDate", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbDocumentGridCollectionCardElement.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbDocumentGridCollectionCardElement.prototype, "item", null);
+UmbDocumentGridCollectionCardElement = __decorate([
+    customElement('umb-document-grid-collection-card')
+], UmbDocumentGridCollectionCardElement);
+export { UmbDocumentGridCollectionCardElement };

package/dist-cms/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.d.ts

@@ -1,8 +1,8 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import '../../../../../ufm/index.js';
+import './document-grid-collection-card.element.js';
 export declare class UmbDocumentGridCollectionViewElement extends UmbLitElement {
     #private;
-    private _workspacePathBuilder?;
     private _items;
     private _selection;
     private _userDefinedProperties?;

package/dist-cms/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.js

@@ -6,12 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js';
 import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
-import { getPropertyValueByAlias } from '../index.js';
-import { css, customElement, html, repeat, state, when } from '../../../../../../external/lit/index.js';
-import { fromCamelCase } from '../../../../../core/utils/index.js';
+import { css, customElement, html, repeat, state } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import '../../../../../ufm/index.js';
+import './document-grid-collection-card.element.js';
 let UmbDocumentGridCollectionViewElement = class UmbDocumentGridCollectionViewElement extends UmbLitElement {
     #collectionContext;
     constructor() {
@@ -21,9 +20,6 @@ let UmbDocumentGridCollectionViewElement = class UmbDocumentGridCollectionViewEl
         this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (collectionContext) => {
             this.#collectionContext = collectionContext;
             collectionContext?.setupView(this);
-            this.observe(collectionContext?.workspacePathBuilder, (builder) => {
-                this._workspacePathBuilder = builder;
-            }, 'observePath');
             this.#observeCollectionContext();
         });
     }
@@ -46,12 +42,9 @@ let UmbDocumentGridCollectionViewElement = class UmbDocumentGridCollectionViewEl
         return this.#collectionContext?.selection.isSelected(item.unique);
     }
     #getEditUrl(item) {
-        return item.unique && this._workspacePathBuilder
-            ? this._workspacePathBuilder({ entityType: item.entityType }) +
-                UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({
-                    unique: item.unique,
-                })
-            : '';
+        return UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateAbsolute({
+            unique: item.unique,
+        });
     }
     render() {
         return html `
@@ -62,53 +55,18 @@ let UmbDocumentGridCollectionViewElement = class UmbDocumentGridCollectionViewEl
     }
     #renderItem(item) {
         return html `
-			<uui-card-content-node
-				.name=${item.name ?? 'Unnamed Document'}
+			<umb-document-grid-collection-card
+				class="document-grid-item"
+				href=${this.#getEditUrl(item)}
+				.item=${item}
+				.columns=${this._userDefinedProperties}
 				selectable
 				?select-only=${this._selection.length > 0}
 				?selected=${this.#isSelected(item)}
-				href=${this.#getEditUrl(item)}
 				@selected=${() => this.#onSelect(item)}
 				@deselected=${() => this.#onDeselect(item)}>
-				<umb-icon slot="icon" name=${item.icon}></umb-icon>
-				${this.#renderState(item)} ${this.#renderProperties(item)}
-			</uui-card-content-node>
-		`;
-    }
-    #getStateTagConfig(state) {
-        switch (state) {
-            case 'Published':
-                return { color: 'positive', label: this.localize.term('content_published') };
-            case 'PublishedPendingChanges':
-                return { color: 'warning', label: this.localize.term('content_publishedPendingChanges') };
-            case 'Draft':
-                return { color: 'default', label: this.localize.term('content_unpublished') };
-            case 'NotCreated':
-                return { color: 'danger', label: this.localize.term('content_notCreated') };
-            default:
-                return { color: 'danger', label: fromCamelCase(state) };
-        }
-    }
-    #renderState(item) {
-        const tagConfig = this.#getStateTagConfig(item.state);
-        return html `<uui-tag slot="tag" color=${tagConfig.color} look="secondary">${tagConfig.label}</uui-tag>`;
-    }
-    #renderProperties(item) {
-        if (!this._userDefinedProperties)
-            return;
-        return html `
-			<ul>
-				${repeat(this._userDefinedProperties, (column) => column.alias, (column) => this.#renderProperty(item, column))}
-			</ul>
-		`;
-    }
-    #renderProperty(item, column) {
-        const value = getPropertyValueByAlias(item, column.alias);
-        return html `
-			<li>
-				<span>${this.localize.string(column.header)}:</span>
-				${when(column.nameTemplate, () => html `<umb-ufm-render inline .markdown=${column.nameTemplate} .value=${{ value }}></umb-ufm-render>`, () => html `${value}`)}
-			</li>
+				<umb-icon slot="icon" name=${item.documentType.icon}></umb-icon>
+			</umb-document-grid-collection-card>
 		`;
     }
     static { this.styles = [
@@ -119,38 +77,19 @@ let UmbDocumentGridCollectionViewElement = class UmbDocumentGridCollectionViewEl
 				flex-direction: column;
 			}
 
-			.container {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
 			#document-grid {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 				gap: var(--uui-size-space-4);
 			}
 
-			uui-card-content-node {
+			.document-grid-item {
 				width: 100%;
-				height: 180px;
-			}
-
-			ul {
-				list-style: none;
-				padding-inline-start: 0px;
-				margin: 0;
-			}
-
-			ul > li > span {
-				font-weight: 700;
+				min-height: 180px;
 			}
 		`,
     ]; }
 };
-__decorate([
-    state()
-], UmbDocumentGridCollectionViewElement.prototype, "_workspacePathBuilder", void 0);
 __decorate([
     state()
 ], UmbDocumentGridCollectionViewElement.prototype, "_items", void 0);

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-entity-actions-table-column-view.element.d.ts

@@ -3,13 +3,12 @@ import { nothing } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 export declare class UmbDocumentEntityActionsTableColumnViewElement extends UmbLitElement {
     #private;
+    set value(value: UmbDocumentCollectionItemModel);
     get value(): UmbDocumentCollectionItemModel | undefined;
-    set value(value: UmbDocumentCollectionItemModel | undefined);
-    private _value?;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        ['umb-document-entity-actions-table-column-view']: UmbDocumentEntityActionsTableColumnViewElement;
+        'umb-document-entity-actions-table-column-view': UmbDocumentEntityActionsTableColumnViewElement;
     }
 }

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-entity-actions-table-column-view.element.js

@@ -5,24 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbAncestorsEntityContext } from '../../../../../../core/entity/index.js';
-import { html, nothing, customElement, property } from '../../../../../../../external/lit/index.js';
+import { customElement, html, nothing, property } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 let UmbDocumentEntityActionsTableColumnViewElement = class UmbDocumentEntityActionsTableColumnViewElement extends UmbLitElement {
-    get value() {
-        return this._value;
-    }
+    #ancestorContext = new UmbAncestorsEntityContext(this);
     set value(value) {
-        this._value = value;
-        this.#ancestorContext.setAncestors(this._value?.ancestors ?? []);
+        this.#value = value;
+        this.#ancestorContext.setAncestors(this.#value?.ancestors ?? []);
     }
-    #ancestorContext = new UmbAncestorsEntityContext(this);
+    get value() {
+        return this.#value;
+    }
+    #value;
     render() {
-        if (!this._value)
+        if (!this.#value)
             return nothing;
         // TODO: Missing name to parse on
         return html `
 			<umb-entity-actions-table-column-view
-				.value=${{ unique: this._value.unique, entityType: this._value.entityType }}>
+				.value=${{ unique: this.#value.unique, entityType: this.#value.entityType }}>
 			</umb-entity-actions-table-column-view>
 		`;
     }

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.d.ts

@@ -4,11 +4,11 @@ import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../../../../core/components/index.js';
 export declare class UmbDocumentTableColumnNameElement extends UmbLitElement implements UmbTableColumnLayoutElement {
     #private;
+    private _name;
     column: UmbTableColumn;
     item: UmbTableItem;
-    get value(): UmbEditableDocumentCollectionItemModel;
     set value(value: UmbEditableDocumentCollectionItemModel);
-    private _name;
+    get value(): UmbEditableDocumentCollectionItemModel;
     constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.js

@@ -8,22 +8,22 @@ import { UmbDocumentItemDataResolver } from '../../../../item/index.js';
 import { css, customElement, html, nothing, property, state } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 let UmbDocumentTableColumnNameElement = class UmbDocumentTableColumnNameElement extends UmbLitElement {
-    #value;
-    get value() {
-        return this.#value;
-    }
+    #resolver;
     set value(value) {
         this.#value = value;
         if (value.item) {
-            this.#item.setData(value.item);
+            this.#resolver.setData(value.item);
         }
     }
-    #item;
+    get value() {
+        return this.#value;
+    }
+    #value;
     constructor() {
         super();
+        this.#resolver = new UmbDocumentItemDataResolver(this);
         this._name = '';
-        this.#item = new UmbDocumentItemDataResolver(this);
-        this.#item.observe(this.#item.name, (name) => (this._name = name || ''));
+        this.#resolver.observe(this.#resolver.name, (name) => (this._name = name || ''));
     }
     render() {
         if (!this.value)
@@ -42,12 +42,12 @@ let UmbDocumentTableColumnNameElement = class UmbDocumentTableColumnNameElement
 		`,
     ]; }
 };
-__decorate([
-    property({ attribute: false })
-], UmbDocumentTableColumnNameElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbDocumentTableColumnNameElement.prototype, "_name", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbDocumentTableColumnNameElement.prototype, "value", null);
 UmbDocumentTableColumnNameElement = __decorate([
     customElement('umb-document-table-column-name')
 ], UmbDocumentTableColumnNameElement);

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.d.ts

@@ -0,0 +1,22 @@
+import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js';
+import { nothing } from '../../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
+import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../../../../core/components/index.js';
+export declare class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+    #private;
+    private _createDate?;
+    private _state?;
+    private _updateDate?;
+    column: UmbTableColumn;
+    item: UmbTableItem;
+    set value(value: UmbEditableDocumentCollectionItemModel);
+    get value(): UmbEditableDocumentCollectionItemModel;
+    constructor();
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export default UmbDocumentTableColumnPropertyValueElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-document-table-column-property-value': UmbDocumentTableColumnPropertyValueElement;
+    }
+}

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.js

@@ -0,0 +1,78 @@
+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 { UmbDocumentItemDataResolver } from '../../../../item/index.js';
+import { customElement, html, nothing, property, state, when } from '../../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
+import { DocumentVariantStateModel } from '../../../../../../core/backend-api/index.js';
+let UmbDocumentTableColumnPropertyValueElement = class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement {
+    #resolver = new UmbDocumentItemDataResolver(this);
+    set value(value) {
+        this.#value = value;
+        if (value.item) {
+            this.#resolver.setData(value.item);
+        }
+    }
+    get value() {
+        return this.#value;
+    }
+    #value;
+    constructor() {
+        super();
+        this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || ''));
+        this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate));
+        this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate));
+    }
+    #getPropertyValueByAlias() {
+        const alias = this.column.alias;
+        const item = this.value.item;
+        switch (alias) {
+            case 'contentTypeAlias':
+                return item.documentType.alias;
+            case 'createDate':
+                return this._createDate?.toLocaleString();
+            case 'creator':
+            case 'owner':
+                return item.creator;
+            case 'published':
+                return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False';
+            case 'sortOrder':
+                return item.sortOrder;
+            case 'updateDate':
+                return this._updateDate?.toLocaleString();
+            case 'updater':
+                return item.updater;
+            default: {
+                const culture = this.#resolver.getCulture();
+                const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture));
+                return prop?.value ?? '';
+            }
+        }
+    }
+    render() {
+        if (!this.value)
+            return nothing;
+        const value = this.#getPropertyValueByAlias();
+        return when(this.column.labelTemplate, () => html `<umb-ufm-render inline .markdown=${this.column.labelTemplate} .value=${{ value }}></umb-ufm-render>`, () => html `${value}`);
+    }
+};
+__decorate([
+    state()
+], UmbDocumentTableColumnPropertyValueElement.prototype, "_createDate", void 0);
+__decorate([
+    state()
+], UmbDocumentTableColumnPropertyValueElement.prototype, "_state", void 0);
+__decorate([
+    state()
+], UmbDocumentTableColumnPropertyValueElement.prototype, "_updateDate", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbDocumentTableColumnPropertyValueElement.prototype, "value", null);
+UmbDocumentTableColumnPropertyValueElement = __decorate([
+    customElement('umb-document-table-column-property-value')
+], UmbDocumentTableColumnPropertyValueElement);
+export { UmbDocumentTableColumnPropertyValueElement };
+export default UmbDocumentTableColumnPropertyValueElement;

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.d.ts

@@ -3,11 +3,11 @@ import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../../../../core/components/index.js';
 export declare class UmbDocumentTableColumnStateElement extends UmbLitElement implements UmbTableColumnLayoutElement {
     #private;
+    private _state;
     column: UmbTableColumn;
     item: UmbTableItem;
-    get value(): UmbEditableDocumentCollectionItemModel;
     set value(value: UmbEditableDocumentCollectionItemModel);
-    private _state;
+    get value(): UmbEditableDocumentCollectionItemModel;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-cms/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.js

@@ -7,48 +7,51 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbDocumentItemDataResolver } from '../../../../item/index.js';
 import { customElement, html, property, state } from '../../../../../../../external/lit/index.js';
 import { fromCamelCase } from '../../../../../../core/utils/index.js';
+import { DocumentVariantStateModel } from '../../../../../../core/backend-api/index.js';
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 let UmbDocumentTableColumnStateElement = class UmbDocumentTableColumnStateElement extends UmbLitElement {
-    #value;
-    get value() {
-        return this.#value;
-    }
+    #resolver;
     set value(value) {
         this.#value = value;
         if (value.item) {
-            this.#item.setData(value.item);
+            this.#resolver.setData(value.item);
         }
     }
-    #item;
+    get value() {
+        return this.#value;
+    }
+    #value;
     constructor() {
         super();
+        this.#resolver = new UmbDocumentItemDataResolver(this);
         this._state = '';
-        this.#item = new UmbDocumentItemDataResolver(this);
-        this.#item.observe(this.#item.state, (state) => (this._state = state || ''));
+        this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || ''));
     }
-    render() {
+    #getStateTagConfig() {
         switch (this._state) {
-            case 'Published':
-                return html `<uui-tag color="positive" look="primary">${this.localize.term('content_published')}</uui-tag>`;
-            case 'PublishedPendingChanges':
-                return html `<uui-tag color="positive" look="primary"
-					>${this.localize.term('content_publishedPendingChanges')}</uui-tag
-				>`;
-            case 'Draft':
-                return html `<uui-tag color="default" look="secondary">${this.localize.term('content_unpublished')}</uui-tag>`;
-            case 'NotCreated':
-                return html `<uui-tag color="default" look="secondary">${this.localize.term('content_notCreated')}</uui-tag>`;
+            case DocumentVariantStateModel.PUBLISHED:
+                return { color: 'positive', label: this.localize.term('content_published') };
+            case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES:
+                return { color: 'warning', label: this.localize.term('content_publishedPendingChanges') };
+            case DocumentVariantStateModel.DRAFT:
+                return { color: 'default', label: this.localize.term('content_unpublished') };
+            case DocumentVariantStateModel.NOT_CREATED:
+                return { color: 'danger', label: this.localize.term('content_notCreated') };
             default:
-                return html `<uui-tag color="default" look="secondary">${fromCamelCase(this._state)}</uui-tag>`;
+                return { color: 'danger', label: fromCamelCase(this._state) };
         }
     }
+    render() {
+        const tagConfig = this.#getStateTagConfig();
+        return html `<uui-tag color=${tagConfig.color} look="secondary">${tagConfig.label}</uui-tag>`;
+    }
 };
-__decorate([
-    property({ attribute: false })
-], UmbDocumentTableColumnStateElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbDocumentTableColumnStateElement.prototype, "_state", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbDocumentTableColumnStateElement.prototype, "value", null);
 UmbDocumentTableColumnStateElement = __decorate([
     customElement('umb-document-table-column-state')
 ], UmbDocumentTableColumnStateElement);

package/dist-cms/packages/documents/documents/collection/views/table/document-table-collection-view.element.d.ts

@@ -1,10 +1,10 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import './column-layouts/document-entity-actions-table-column-view.element.js';
 import './column-layouts/document-table-column-name.element.js';
+import './column-layouts/document-table-column-property-value.element.js';
 import './column-layouts/document-table-column-state.element.js';
 export declare class UmbDocumentTableCollectionViewElement extends UmbLitElement {
     #private;
-    private _workspacePathBuilder?;
     private _userDefinedProperties?;
     private _items?;
     private _tableConfig;