diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts index 0c38be95d5..c32258db97 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts @@ -2,7 +2,7 @@ import type { UmbDocumentTypeItemModel, UmbDocumentTypeTreeItemModel } from '../ import { UMB_DOCUMENT_TYPE_WORKSPACE_MODAL } from '../../constants.js'; import { UMB_EDIT_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../../paths.js'; import { UmbDocumentTypePickerInputContext } from './input-document-type.context.js'; -import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, repeat, nothing, when } from '@umbraco-cms/backoffice/external/lit'; import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -105,6 +105,10 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin 0 ? this.selection.join(',') : undefined; } + + @property({ type: Boolean, attribute: 'readonly' }) + readonly?: boolean; + @state() private _items?: Array; @@ -176,7 +180,7 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin 0 && this.selection.length >= this.max) return nothing; + if (this.readonly || (this.max > 0 && this.selection.length >= this.max)) return nothing; return html` ${this.#renderIcon(item)} - this.#removeItem(item)} label=${this.localize.term('general_remove')}> + ${when( + !this.readonly, + () => html` + this.#removeItem(item)}> + `, + )} `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/manifests.ts index 21d09d0cfe..4f969cc8ca 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/manifests.ts @@ -9,6 +9,7 @@ export const manifest: ManifestPropertyEditorUi = { label: 'Document Type Picker', icon: 'icon-document-dashed-line', group: 'advanced', + supportsReadOnly: true, settings: { properties: [ { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts index 52a044deec..b9ce0b8d16 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts @@ -23,6 +23,9 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement this.onlyElementTypes = config.getValueByAlias('onlyPickElementTypes') ?? false; } + @property({ type: Boolean, attribute: 'readonly' }) + readonly = false; + @state() min = 0; @@ -43,6 +46,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement .min=${this.min} .max=${this.max} .value=${this.value} + .readonly=${this.readonly} .elementTypesOnly=${this.onlyElementTypes ?? false} @change=${this.#onChange}>