Feat: Readonly state for uui-color-area

packages/uui-color-area/lib/uui-color-area.element.ts

@@ -19,6 +19,24 @@ import { UUIColorAreaEvent } from './UUIColorAreaEvent';
 export class UUIColorAreaElement extends LitElement {
   @state() private isDraggingGridHandle = false;
 
+  /**
+   * Sets the color area to disabled.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Sets the color area to readonly mode.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * The current hue.
    * @attr
@@ -114,11 +132,9 @@ export class UUIColorAreaElement extends LitElement {
     }
   }
 
-  /** Disables the color area. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
   handleGridDrag(event: PointerEvent) {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
+
     const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-area')!;
     const handle = grid.querySelector<HTMLElement>('.color-area__handle')!;
     const { width, height } = grid.getBoundingClientRect();
@@ -272,6 +288,11 @@ export class UUIColorAreaElement extends LitElement {
         opacity: 0.55;
       }
 
+      :host([readonly]) {
+        pointer-events: none;
+        cursor: default;
+      }
+
       .color-area {
         position: relative;
         height: 100%;

packages/uui-color-area/lib/uui-color-area.story.ts

@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
+import { html } from 'lit';
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { UUIColorAreaElement } from './uui-color-area.element';
 import readme from '../README.md?raw';
@@ -9,6 +10,16 @@ const meta: Meta<UUIColorAreaElement> = {
   id: 'uui-color-area',
   title: 'Inputs/Color/Color Area',
   component: 'uui-color-area',
+  args: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0,
+    brightness: 0,
+    alpha: 100,
+    disabled: false,
+    readonly: false,
+    value: '',
+  },
   argTypes: {
     value: { control: 'color' },
   },
@@ -30,6 +41,48 @@ const meta: Meta<UUIColorAreaElement> = {
 
 export default meta;
 
-type Story = StoryObj<UUIColorAreaElement>;
+const Template: StoryFn<UUIColorAreaElement> = props => {
+  return html`<uui-color-area
+    .hue=${props.hue}
+    .saturation=${props.saturation}
+    .lightness=${props.lightness}
+    .brightness=${props.brightness}
+    .alpha=${props.alpha}
+    .value=${props.value}
+    .disabled=${props.disabled}
+    .readonly=${props.readonly}>
+  </uui-color-area>`;
+};
+
+export const AAAOverview = Template.bind({});
+AAAOverview.storyName = 'Overview';
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  disabled: true,
+};
+
+Disabled.parameters = {
+  controls: { include: ['disbled'] },
+  docs: {
+    source: {
+      code: `<uui-color-area disbled></uui-color-area>`,
+    },
+  },
+};
+
+export const Readonly = Template.bind({});
+
+Readonly.args = {
+  readonly: true,
+};
 
-export const Overview: Story = {};
+Readonly.parameters = {
+  controls: { include: ['readonly'] },
+  docs: {
+    source: {
+      code: `<uui-color-area readonly></uui-color-area>`,
+    },
+  },
+};