implement readonly mode for umb-property-editor-ui-document-type-picker (#19089)

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<string | un
 	public override get value(): string | undefined {
 		return this.selection.length > 0 ? this.selection.join(',') : undefined;
 	}
+
+	@property({ type: Boolean, attribute: 'readonly' })
+	readonly?: boolean;
+
 	@state()
 	private _items?: Array<UmbDocumentTypeItemModel>;
 
@@ -176,7 +180,7 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin<string | un
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selection.length >= this.max) return nothing;
+		if (this.readonly || (this.max > 0 && this.selection.length >= this.max)) return nothing;
 		return html`
 			<uui-button
 				id="btn-add"
@@ -206,7 +210,14 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin<string | un
 			<uui-ref-node-document-type id=${item.unique} name=${this.localize.string(item.name)} href=${href}>
 				${this.#renderIcon(item)}
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
+					${when(
+						!this.readonly,
+						() => html`
+							<uui-button
+								label=${this.localize.term('general_remove')}
+								@click=${() => this.#removeItem(item)}></uui-button>
+						`,
+					)}
 				</uui-action-bar>
 			</uui-ref-node-document-type>
 		`;

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: [
 				{

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}>
 			</umb-input-document-type>