From 870137b36ec9dfb8584af36fc514ba4a9dfbfdde Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 22 Sep 2024 14:10:24 +0200
Subject: [PATCH] Add readonly to color slider

---
 .../lib/uui-color-slider.element.ts           | 30 +++++++++++++++----
 .../lib/uui-color-slider.story.ts             | 16 +++++++++-
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index 1c6539f23..df98d89e6 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -84,12 +84,22 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   @property() value = 0;
 
   /**
-   * Disables the color slider.
+   * Sets the color slider to readonly mode.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  /**
+   * Sets the color slider to disabled.
    * @type {boolean}
    * @attr
    * @default false
    **/
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   private container!: HTMLElement;
   private handle!: HTMLElement;
@@ -115,7 +125,8 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   }
 
   handleDrag(event: PointerEvent) {
-    if (this.disabled || !this.container || !this.handle) return;
+    if (this.disabled || this.readonly || !this.container || !this.handle)
+      return;
 
     const { width, height } = this.container.getBoundingClientRect();
 
@@ -140,7 +151,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   }
 
   handleClick(event: MouseEvent) {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
 
     this.value = this.getValueFromMousePosition(event);
     this.syncValues();
@@ -258,7 +269,8 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
         <span
           id="color-slider__handle"
           style="--current-value: ${this.cssPropCurrentValue}%;"
-          tabindex=${ifDefined(this.disabled ? undefined : '0')}></span>
+          tabindex=${ifDefined(this.disabled ? undefined : '0')}>
+        </span>
       </div>
       ${Math.round(this.value)}`;
   }
@@ -340,6 +352,14 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
         opacity: 0.55;
       }
 
+      :host([readonly]) {
+        cursor: default;
+      }
+
+      :host([readonly]) #color-slider {
+        pointer-events: none;
+      }
+
       #color-slider__handle {
         position: absolute;
         top: calc(50% - var(--uui-slider-handle-size) / 2);
diff --git a/packages/uui-color-slider/lib/uui-color-slider.story.ts b/packages/uui-color-slider/lib/uui-color-slider.story.ts
index 3e8f2f9ba..011c8ed25 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.story.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.story.ts
@@ -53,7 +53,21 @@ export const Disabled: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-color-slider label="Slider label" disabled="true"></uui-color-slider>`,
+        code: `<uui-color-slider label="Slider label" disabled></uui-color-slider>`,
+      },
+    },
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+    value: 50,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-color-slider label="Slider label" readonly></uui-color-slider>`,
       },
     },
   },