diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts index ebbe867b0a..a2ec2b919a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/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}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts index 11f16b11fe..cfbe53ce95 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/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(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}>`; + @input=${this.onChange} + ?readonly=${this.readonly}>`; } static styles = [