@umbraco-ui/uui-color-swatch 1.10.0 → 1.11.0

package/custom-elements.json

@@ -4,7 +4,7 @@
     {
       "name": "uui-color-swatch",
       "path": "./lib/uui-color-swatch.element.ts",
-      "description": "Color swatch, can have label and be selectable.",
+      "description": "Color swatch, can have label and be selectable, disabled or readonly.",
       "attributes": [
         {
           "name": "value",
@@ -18,9 +18,15 @@
         },
         {
           "name": "disabled",
-          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "description": "Sets the swatch to disabled.",
           "type": "boolean",
-          "default": "false"
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the swatch to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "show-label",
@@ -67,9 +73,16 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "description": "Sets the swatch to disabled.",
           "type": "boolean",
-          "default": "false"
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the swatch to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "showLabel",

package/lib/index.js

@@ -21,6 +21,7 @@ let UUIColorSwatchElement = class extends LabelMixin(
   constructor() {
     super();
     this.disabled = false;
+    this.readonly = false;
     this.showLabel = false;
     this.addEventListener("click", this._setAriaAttributes);
   }
@@ -48,10 +49,10 @@ let UUIColorSwatchElement = class extends LabelMixin(
     this._setAriaAttributes();
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("disabled")) {
+    if (changedProperties.has("disabled") || changedProperties.has("readonly")) {
       if (this.selectable) {
-        this.selectable = !this.disabled;
-        this.deselectable = !this.disabled;
+        this.selectable = !this.disabled && !this.readonly;
+        this.deselectable = !this.disabled && !this.readonly;
       }
     }
     if (changedProperties.has("selectable") || changedProperties.has("selected")) {
@@ -63,7 +64,7 @@ let UUIColorSwatchElement = class extends LabelMixin(
       <button
         id="swatch"
         aria-label=${this.label}
-        aria-disabled="${this.disabled}"
+        ?disabled="${this.disabled}"
         title="${this.label}">
         <div class="color-swatch color-swatch--transparent-bg">
           <div
@@ -126,6 +127,10 @@ UUIColorSwatchElement.styles = [
         opacity: 0.5;
       }
 
+      :host([readonly]) {
+        cursor: default;
+      }
+
       #swatch {
         cursor: inherit;
         outline: none;
@@ -261,6 +266,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIColorSwatchElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchElement.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-label", reflect: true })
 ], UUIColorSwatchElement.prototype, "showLabel", 2);

package/lib/uui-color-swatch.element.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare const UUIColorSwatchElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").ActiveMixinInterface) & typeof LitElement;
 /**
- * Color swatch, can have label and be selectable.
+ * Color swatch, can have label and be selectable, disabled or readonly.
  *
  * @element uui-color-swatch
  * @cssprop --uui-swatch-size - The size of the swatch.
@@ -23,11 +23,19 @@ export declare class UUIColorSwatchElement extends UUIColorSwatchElement_base {
     set color(newValue: string);
     private _color?;
     /**
-     * Determines if the options is disabled. If true the option can't be selected
-     *
+     * Sets the swatch to disabled.
+     * @type {boolean}
      * @attr
+     * @default false
      */
     disabled: boolean;
+    /**
+     * Sets the swatch to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
     /**
      * When true shows element label below the color checkbox
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-swatch",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.10.0",
-    "@umbraco-ui/uui-icon-registry-essential": "1.10.0",
+    "@umbraco-ui/uui-base": "1.11.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.11.0",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatch",
-  "gitHead": "fc19b5d3cd80cf4205ec56d14403ae0e926d6aed"
+  "gitHead": "414ce88901f82c5fc7d6be942779047bb34a1407"
 }