feat(uui-color-swatches): Add readonly to color swatches component (#932)

Author: bjarnef

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');

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,