Merge branch 'main' into v14/chore/implicit-overwrite

Author: iOvergaard

src/packages/property-editors/number/property-editor-ui-number.element.ts

@@ -9,6 +9,15 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	@property({ type: Number })
 	value?: number;
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	private _max?: number;
 
@@ -48,7 +57,8 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 				step=${ifDefined(this._step)}
 				placeholder=${ifDefined(this._placeholder)}
 				.value=${this.value ?? (this._placeholder ? undefined : 0)}
-				@input=${this.#onInput}>
+				@input=${this.#onInput}
+				?readonly=${this.readonly}>
 			</uui-input>
 		`;
 	}

src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts

@@ -6,6 +6,7 @@ import {
 	state,
 	ifDefined,
 	type PropertyValueMap,
+	property,
 } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -23,6 +24,15 @@ export class UmbPropertyEditorUITextBoxElement
 	extends UmbFormControlMixin<string>(UmbLitElement, undefined)
 	implements UmbPropertyEditorUiElement
 {
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	#defaultType: UuiInputTypeType = 'text';
 
 	@state()
@@ -63,7 +73,8 @@ export class UmbPropertyEditorUITextBoxElement
 			placeholder=${ifDefined(this._placeholder)}
 			inputMode=${ifDefined(this._inputMode)}
 			maxlength=${ifDefined(this._maxChars)}
-			@input=${this.onChange}></uui-input>`;
+			@input=${this.onChange}
+			?readonly=${this.readonly}></uui-input>`;
 	}
 
 	static styles = [