From 0a032531d09223576abf12d8f7a72fd2cb31cf6c Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 13 Oct 2024 22:06:28 +0200
Subject: [PATCH] Add readonly to color swatches component

---
 .../lib/uui-color-swatches.element.ts             | 15 ++++++++++++++-
 .../lib/uui-color-swatches.story.ts               |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.element.ts b/packages/uui-color-swatches/lib/uui-color-swatches.element.ts
index 78021a9e8..8ec73fea1 100644
--- a/packages/uui-color-swatches/lib/uui-color-swatches.element.ts
+++ b/packages/uui-color-swatches/lib/uui-color-swatches.element.ts
@@ -26,13 +26,22 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   value = '';
 
   /**
-   * Disables the color swatches.
+   * Sets the swatches to disabled.
    * @type {boolean}
    * @attr
    * @default false
    **/
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /**
+   * Sets the swatches to readonly mode.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly: boolean = false;
+
   @queryAssignedElements({ selector: 'uui-color-swatch' })
   private readonly _swatches!: Array<UUIColorSwatchElement>;
 
@@ -86,6 +95,10 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
         swatch.setAttribute('selectable', 'selectable');
       }
 
+      if (this.readonly) {
+        swatch.setAttribute('readonly', '');
+      }
+
       if (this.value !== '' && swatch.value === this.value) {
         swatch.selected = true;
         swatch.setAttribute('aria-checked', 'true');
diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
index 55af6429d..726b3c09e 100644
--- a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
+++ b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
@@ -60,6 +60,12 @@ export const Disabled: Story = {
   },
 };
 
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
 export const ShowLabel: Story = {
   args: {
     showLabel: true,