@umbraco-ui/uui-color-picker 1.2.0-rc.0 → 1.2.0-rc.2

package/lib/index.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, nothing, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { query, state, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -328,19 +328,24 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
                 </uui-button>` : ""}
           </uui-button-group>
         </div>
-        <uui-color-swatches
-          id="swatches"
-          class="color-picker__swatches"
-          @change=${this.handleColorSwatchChange}>
-          ${this.swatches.map(
-      (swatch) => html`<uui-color-swatch
-                label="${swatch}"
-                .value=${swatch}></uui-color-swatch>`
-    )}
-        </uui-color-swatches>
+        ${this._renderSwatches()}
       </div>
     `;
   }
+  _renderSwatches() {
+    if (!this.swatches)
+      return nothing;
+    return html`<uui-color-swatches
+      id="swatches"
+      class="color-picker__swatches"
+      @change=${this.handleColorSwatchChange}>
+      ${this.swatches.map(
+      (swatch) => html`<uui-color-swatch
+            label="${swatch}"
+            .value=${swatch}></uui-color-swatch>`
+    )}
+    </uui-color-swatches>`;
+  }
   _renderPreviewButton() {
     return html`<button
         type="button"
@@ -483,6 +488,7 @@ UUIColorPickerElement.styles = [
 
       uui-color-swatches {
         border-top: solid 1px #d4d4d8;
+        padding: 0.75rem;
       }
 
       button[slot='trigger'] {

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

@@ -115,6 +115,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     setLetterCase(string: string): string;
     private _syncValues;
     private _renderColorPicker;
+    private _renderSwatches;
     private _renderPreviewButton;
     render(): import("lit-html").TemplateResult<1>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.2.0-rc.0",
+  "version": "1.2.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.0-rc.0",
+    "@umbraco-ui/uui-base": "1.2.0-rc.2",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "43f1b9a8bd1721af30ba7c145517ee665d874df3"
+  "gitHead": "b3217b08b13dabeef0225ab3ead06d6677a245a2"
 }