@umbraco-ui/uui-color-swatches 1.10.0 → 1.12.0

package/custom-elements.json

@@ -4,7 +4,7 @@
     {
       "name": "uui-color-swatches",
       "path": "./lib/uui-color-swatches.element.ts",
-      "description": "Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.",
+      "description": "Put uui-color-swatch elements inside this element to create a color swatch selector.",
       "attributes": [
         {
           "name": "value",
@@ -14,7 +14,13 @@
         },
         {
           "name": "disabled",
-          "description": "Disables the color swatches.",
+          "description": "Sets the swatches to disabled.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the swatches to readonly mode.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -35,13 +41,16 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the color swatches.",
+          "description": "Sets the swatches to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
         {
-          "name": "swatches",
-          "type": "UUIColorSwatchElement[]"
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the swatches to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "styles",

package/lib/index.js

@@ -29,9 +29,10 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
     super();
     this.value = "";
     this.disabled = false;
+    this.readonly = false;
     this._onSelected = (event) => {
       const target = event.target;
-      if (!this.swatches.includes(target)) return;
+      if (!this._swatches.includes(target)) return;
       if (this._selectedElement) {
         this._selectedElement.selected = false;
         this._selectedElement.active = false;
@@ -44,7 +45,7 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
     };
     this._onDeselected = (event) => {
       const target = event.target;
-      if (!this.swatches.includes(target)) return;
+      if (!this._swatches.includes(target)) return;
       if (this._activeElement === target) {
         this._activeElement = void 0;
       }
@@ -84,8 +85,8 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
     }
   }
   _handleSlotChange() {
-    if (!this.swatches || this.swatches.length === 0) return;
-    this.swatches.forEach((swatch) => {
+    if (!this._swatches || this._swatches.length === 0) return;
+    this._swatches.forEach((swatch) => {
       swatch.setAttribute("aria-checked", "false");
       swatch.setAttribute("role", "radio");
       if (this.disabled) {
@@ -93,6 +94,9 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
       } else {
         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");
@@ -107,7 +111,7 @@ let UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
    * @memberof UUIColorSwatchesElement
    */
   resetSelection() {
-    this.swatches.forEach((swatch) => {
+    this._swatches.forEach((swatch) => {
       swatch.selected = false;
       swatch.active = false;
       swatch.selectable = !swatch.disabled;
@@ -135,9 +139,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUIColorSwatchesElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchesElement.prototype, "readonly", 2);
 __decorateClass([
   queryAssignedElements({ selector: "uui-color-swatch" })
-], UUIColorSwatchesElement.prototype, "swatches", 2);
+], UUIColorSwatchesElement.prototype, "_swatches", 2);
 UUIColorSwatchesElement = __decorateClass([
   defineElement("uui-color-swatches")
 ], UUIColorSwatchesElement);

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

@@ -1,8 +1,7 @@
-import type { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch/lib';
 import { LitElement, PropertyValueMap } from 'lit';
 declare const UUIColorSwatchesElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
- *  Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.
+ *  Put uui-color-swatch elements inside this element to create a color swatch selector.
  *  @element uui-color-swatches
  *  @slot - Default slot for content.
  *  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.
@@ -15,13 +14,20 @@ export declare class UUIColorSwatchesElement extends UUIColorSwatchesElement_bas
      */
     value: string;
     /**
-     * Disables the color swatches.
+     * Sets the swatches to disabled.
      * @type {boolean}
      * @attr
      * @default false
      **/
     disabled: boolean;
-    swatches: Array<UUIColorSwatchElement>;
+    /**
+     * Sets the swatches to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    private readonly _swatches;
     private __activeElement;
     private get _activeElement();
     private set _activeElement(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-swatches",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.10.0",
-    "@umbraco-ui/uui-color-swatch": "1.10.0"
+    "@umbraco-ui/uui-base": "1.12.0",
+    "@umbraco-ui/uui-color-swatch": "1.12.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatches",
-  "gitHead": "fc19b5d3cd80cf4205ec56d14403ae0e926d6aed"
+  "gitHead": "0ac5219b2765bf6c90fe4943a6620b46a7fced4e"
 }