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

package/custom-elements.json

@@ -43,7 +43,7 @@
         },
         {
           "name": "disabled",
-          "description": "Disables the color picker.",
+          "description": "Sets the color picker to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -53,6 +53,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "description": "Sets the color picker to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "uppercase",
           "description": "By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.",
@@ -111,7 +117,7 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the color picker.",
+          "description": "Sets the color picker to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -122,6 +128,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the color picker to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "uppercase",
           "attribute": "uppercase",

package/lib/index.js

@@ -51,6 +51,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this.inline = false;
     this.disabled = false;
     this.opacity = false;
+    this.readonly = false;
     this.uppercase = false;
     this.swatches = [
       "#d0021b",
@@ -274,6 +275,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
           .value="${this.value}"
           .hue="${Math.round(this.hue)}"
           ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
           @change=${this.handleGridChange}>
         </uui-color-area>
         <div class="color-picker__controls">
@@ -283,6 +285,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
               class="hue-slider"
               .value=${Math.round(this.hue)}
               ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
               @change=${this.handleHueChange}>
             </uui-color-slider>
             ${this.opacity ? html`
@@ -297,6 +300,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       this.lightness
     )}
                     ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
                 ` : ""}
@@ -323,6 +327,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
             spellcheck="false"
             .value=${live(this.inputValue)}
             ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
             @keydown=${this.handleInputKeyDown}
             @change=${this.handleInputChange}>
           </uui-input>
@@ -337,7 +342,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
                 </uui-button>` : ""}
             ${hasEyeDropper ? html`<uui-button
                   label="Select a color"
-                  ?disabled=${this.disabled}
+                  ?disabled=${this.disabled || this.readonly}
                   @click=${this.handleEyeDropper}
                   compact>
                   <uui-icon-registry-essential>
@@ -357,6 +362,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       class="color-picker__swatches"
       label="Swatches"
       ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
       (swatch) => html`<uui-color-swatch label="${swatch}" .value=${swatch}>
@@ -588,6 +594,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], UUIColorPickerElement.prototype, "opacity", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorPickerElement.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean })
 ], UUIColorPickerElement.prototype, "uppercase", 2);

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

@@ -70,7 +70,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
      **/
     inline: boolean;
     /**
-     * Disables the color picker.
+     * Sets the color picker to disabled.
      * @attr
      * @type {boolean}
      * @default false
@@ -83,6 +83,13 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
      * @default false
      **/
     opacity: boolean;
+    /**
+     * Sets the color picker to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
     /**
      * By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.
      * @attr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "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-popover-container": "1.10.0",
+    "@umbraco-ui/uui-base": "1.11.0",
+    "@umbraco-ui/uui-popover-container": "1.11.0",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "fc19b5d3cd80cf4205ec56d14403ae0e926d6aed"
+  "gitHead": "414ce88901f82c5fc7d6be942779047bb34a1407"
 }