Merge pull request #2030 from umbraco/v14/feature/umb-property-editor-ui-number-readonly-mode

Feature: Readonly mode for Number Property Editor UI

Author: loivsen

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>
 		`;
 	}