From d5bc8a218e96eaedcf6537e269dd3f7f4482fb60 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 21:29:07 +0200 Subject: [PATCH 1/3] add readonly prop to property editor ui --- .../slider/property-editor-ui-slider.element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts index b962086bdc..9ebf504ca2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts @@ -15,6 +15,15 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U @property({ type: Object }) value: UmbSliderValue | undefined; + /** + * 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() _enableRange = false; @@ -82,7 +91,8 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U .min=${this._min} .max=${this._max} ?enable-range=${this._enableRange} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } From 962f73581ba43fe92756f5df89d5505adea96896 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 21:29:21 +0200 Subject: [PATCH 2/3] readonly slider input --- .../input-slider/input-slider.element.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts index b8a8a94db7..8cb1113c50 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts @@ -24,6 +24,15 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '' @property({ type: Boolean, attribute: 'enable-range' }) enableRange = false; + /** + * 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; + protected override getFormElement() { return undefined; } @@ -45,7 +54,8 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '' .max=${this.max} .step=${this.step} .value=${this.valueLow.toString()} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } @@ -57,7 +67,8 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '' .max=${this.max} .step=${this.step} .value="${this.valueLow},${this.valueHigh}" - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } From 7daac5dcd2f3ea3ff49c295e27c4a9647a421630 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 19 Aug 2024 21:29:28 +0200 Subject: [PATCH 3/3] update manifest --- .../src/packages/property-editors/slider/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts index 16600162ff..0ce26197ab 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts @@ -12,6 +12,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.Slider', icon: 'icon-navigation-horizontal', group: 'common', + supportsReadOnly: true, settings: { properties: [ {