@vertexvis/ui 0.1.0-canary.19 → 0.1.0-canary.20

package/dist/types/components.d.ts

@@ -12,6 +12,9 @@ import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
 import { InputChangeEventDetail, TextSize } from "./components/text-field/text-field";
 import { SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
+import { ColorSwatchSize } from "./components/color-swatch/color-swatch";
+import { ColorPickerVariant } from "./components/color-picker/color-picker";
+import { ColorSwatchSize as ColorSwatchSize1, ColorSwatchTheme, ColorSwatchVariant } from "./components/color-swatch/color-swatch";
 import { Point } from "./types/point";
 import { Popover, PopoverPlacement } from "./components/popover/popover";
 import { VertexExpandableType } from "./components/expandable/expandable";
@@ -197,75 +200,91 @@ export namespace Components {
          */
         "open": boolean;
     }
-    interface VertexColorCircle {
+    interface VertexColorCirclePicker {
         /**
-          * The primary color of this `vertex-color-circle`. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
+          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-swatch`.
          */
-        "color": string;
+        "colors": string[] | string;
         /**
-          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
+          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage": number;
         /**
-          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
+          * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
          */
-        "darkened": string;
+        "direction": 'vertical' | 'horizontal';
         /**
-          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage": number;
         /**
-          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
+          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
-        "lightened": string;
+        "selected"?: string;
         /**
-          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
+          * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
          */
-        "supplementalColor"?: string;
+        "supplementalColors": string[] | string;
         /**
-          * The theme to use for this `vertex-color-circle`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
+          * The theme to use for this `vertex-color-circle-picker`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `colors` will be used as the background-colors for `vertex-color-swatch` elements, and a `darkened` color will be used for the border-colors.  With the `light` theme, the provided `colors` will be used as the background-colors for `vertex-color-swatch` elements, and a `lightened` color will be used for the border-colors.
          */
         "theme": 'light' | 'dark';
     }
-    interface VertexColorCirclePicker {
+    interface VertexColorPicker {
         /**
-          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-circle`.
+          * Whether this color picker is disabled.
          */
-        "colors": string[] | string;
+        "disabled": boolean;
+        /**
+          * The size of the swatch displayed for this color picker. Can be `sm`, `md`, `lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value will also increase the size of the associated hexadecimal value.
+         */
+        "size": ColorSwatchSize;
+        /**
+          * Optional value property to set the initial value of this input.
+         */
+        "value"?: string;
+        /**
+          * The variant of this color picker. Can be `full` or `swatch`, and defaults to `full`.  `full` will display both the visual color swatch and the hexadecimal representation of the color.  `swatch` will display only the visual color swatch.
+         */
+        "variant": ColorPickerVariant;
+    }
+    interface VertexColorSwatch {
         /**
-          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `dark`.
+          * The primary color of this `vertex-color-swatch` in hexadecimal format. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
+         */
+        "color": string;
+        /**
+          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage": number;
         /**
-          * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
+          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
          */
-        "direction": 'vertical' | 'horizontal';
+        "darkened": string;
         /**
-          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage": number;
         /**
-          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-circle` elements are clicked.
+          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
          */
-        "selected"?: string;
+        "lightened": string;
         /**
-          * Optional supplemental colors that will be provided to the underlying `vertex-color-circle` elements for associated indices in the `colors` array.
+          * The size of this color swatch. Can be `sm`, `md`, or `lg`, and defaults to `md`.
          */
-        "supplementalColors": string[] | string;
+        "size": ColorSwatchSize;
         /**
-          * The theme to use for this `vertex-color-circle-picker`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `colors` will be used as the background-colors for `vertex-color-circle` elements, and a `darkened` color will be used for the border-colors.  With the `light` theme, the provided `colors` will be used as the background-colors for `vertex-color-circle` elements, and a `lightened` color will be used for the border-colors.
+          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
          */
-        "theme": 'light' | 'dark';
-    }
-    interface VertexColorPicker {
+        "supplementalColor"?: string;
         /**
-          * Whether this color picker is disabled.
+          * The theme to use for this `vertex-color-swatch`. Can be `none`, `light`, or `dark`, and defaults to `none`.  With no theme (`none`), the provided `color` will be used as the background-color, and the border will be a neutral color.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
          */
-        "disabled": boolean;
+        "theme": ColorSwatchTheme;
         /**
-          * Optional value property to set the initial value of this input.
+          * The variant of this color swatch. Can be either `circle` or `square`, and defaults to `circle`.
          */
-        "value"?: string;
+        "variant": ColorSwatchVariant;
     }
     interface VertexContextMenu {
         /**
@@ -974,12 +993,6 @@ declare global {
         prototype: HTMLVertexCollapsibleElement;
         new (): HTMLVertexCollapsibleElement;
     };
-    interface HTMLVertexColorCircleElement extends Components.VertexColorCircle, HTMLStencilElement {
-    }
-    var HTMLVertexColorCircleElement: {
-        prototype: HTMLVertexColorCircleElement;
-        new (): HTMLVertexColorCircleElement;
-    };
     interface HTMLVertexColorCirclePickerElement extends Components.VertexColorCirclePicker, HTMLStencilElement {
     }
     var HTMLVertexColorCirclePickerElement: {
@@ -992,6 +1005,12 @@ declare global {
         prototype: HTMLVertexColorPickerElement;
         new (): HTMLVertexColorPickerElement;
     };
+    interface HTMLVertexColorSwatchElement extends Components.VertexColorSwatch, HTMLStencilElement {
+    }
+    var HTMLVertexColorSwatchElement: {
+        prototype: HTMLVertexColorSwatchElement;
+        new (): HTMLVertexColorSwatchElement;
+    };
     interface HTMLVertexContextMenuElement extends Components.VertexContextMenu, HTMLStencilElement {
     }
     var HTMLVertexContextMenuElement: {
@@ -1165,9 +1184,9 @@ declare global {
         "vertex-chip": HTMLVertexChipElement;
         "vertex-click-to-edit-textfield": HTMLVertexClickToEditTextfieldElement;
         "vertex-collapsible": HTMLVertexCollapsibleElement;
-        "vertex-color-circle": HTMLVertexColorCircleElement;
         "vertex-color-circle-picker": HTMLVertexColorCirclePickerElement;
         "vertex-color-picker": HTMLVertexColorPickerElement;
+        "vertex-color-swatch": HTMLVertexColorSwatchElement;
         "vertex-context-menu": HTMLVertexContextMenuElement;
         "vertex-dialog": HTMLVertexDialogElement;
         "vertex-draggable-popover": HTMLVertexDraggablePopoverElement;
@@ -1390,43 +1409,13 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
-    interface VertexColorCircle {
-        /**
-          * The primary color of this `vertex-color-circle`. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
-         */
-        "color"?: string;
-        /**
-          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
-         */
-        "darkenPercentage"?: number;
-        /**
-          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
-         */
-        "darkened"?: string;
-        /**
-          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
-         */
-        "lightenPercentage"?: number;
-        /**
-          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
-         */
-        "lightened"?: string;
-        /**
-          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
-         */
-        "supplementalColor"?: string;
-        /**
-          * The theme to use for this `vertex-color-circle`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
-         */
-        "theme"?: 'light' | 'dark';
-    }
     interface VertexColorCirclePicker {
         /**
-          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-circle`.
+          * The colors to show in this `vertex-color-circle-picker`. These values will map to the `color` property of the underlying `vertex-color-swatch`.
          */
         "colors"?: string[] | string;
         /**
-          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `dark`.
+          * The percentage darker color to use to compute the `darkened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `dark`.
          */
         "darkenPercentage"?: number;
         /**
@@ -1434,20 +1423,20 @@ declare namespace LocalJSX {
          */
         "direction"?: 'vertical' | 'horizontal';
         /**
-          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-circle`. This will be used when the `theme` is set to `light`.
+          * The percentage lighter color to use to compute the `lightened` color for the underlying `vertex-color-swatch`. This will be used when the `theme` is set to `light`.
          */
         "lightenPercentage"?: number;
         "onSelectionChanged"?: (event: VertexColorCirclePickerCustomEvent<SelectionChangedDetails>) => void;
         /**
-          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-circle` elements are clicked.
+          * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
         "selected"?: string;
         /**
-          * Optional supplemental colors that will be provided to the underlying `vertex-color-circle` elements for associated indices in the `colors` array.
+          * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
          */
         "supplementalColors"?: string[] | string;
         /**
-          * The theme to use for this `vertex-color-circle-picker`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `colors` will be used as the background-colors for `vertex-color-circle` elements, and a `darkened` color will be used for the border-colors.  With the `light` theme, the provided `colors` will be used as the background-colors for `vertex-color-circle` elements, and a `lightened` color will be used for the border-colors.
+          * The theme to use for this `vertex-color-circle-picker`. Can be either `light` or `dark`, and defaults to `dark`.  With the `dark` theme, the provided `colors` will be used as the background-colors for `vertex-color-swatch` elements, and a `darkened` color will be used for the border-colors.  With the `light` theme, the provided `colors` will be used as the background-colors for `vertex-color-swatch` elements, and a `lightened` color will be used for the border-colors.
          */
         "theme"?: 'light' | 'dark';
     }
@@ -1464,10 +1453,56 @@ declare namespace LocalJSX {
           * Emitted when a new value is input.
          */
         "onValueInput"?: (event: VertexColorPickerCustomEvent<string>) => void;
+        /**
+          * The size of the swatch displayed for this color picker. Can be `sm`, `md`, `lg`, or `xl`, and defaults to `md`. If the `variant` is `full`, this value will also increase the size of the associated hexadecimal value.
+         */
+        "size"?: ColorSwatchSize;
         /**
           * Optional value property to set the initial value of this input.
          */
         "value"?: string;
+        /**
+          * The variant of this color picker. Can be `full` or `swatch`, and defaults to `full`.  `full` will display both the visual color swatch and the hexadecimal representation of the color.  `swatch` will display only the visual color swatch.
+         */
+        "variant"?: ColorPickerVariant;
+    }
+    interface VertexColorSwatch {
+        /**
+          * The primary color of this `vertex-color-swatch` in hexadecimal format. For `dark` theme, this will be the background-color. For `light` theme, this will be the border-color.
+         */
+        "color"?: string;
+        /**
+          * The percentage darker color to use to compute the `darkened` color. This will be used when the `theme` is set to `dark`.
+         */
+        "darkenPercentage"?: number;
+        /**
+          * The computed darker color based on the provided `color` and `darkenPercentage`. This will be used when the `theme` is set to `dark`.
+         */
+        "darkened"?: string;
+        /**
+          * The percentage lighter color to use to compute the `lightened` color. This will be used when the `theme` is set to `light`.
+         */
+        "lightenPercentage"?: number;
+        /**
+          * The computed lighter color based on the provided `color` and `lightenPercentage`. This will be used when the `theme` is set to `light`.
+         */
+        "lightened"?: string;
+        /**
+          * The size of this color swatch. Can be `sm`, `md`, or `lg`, and defaults to `md`.
+         */
+        "size"?: ColorSwatchSize;
+        /**
+          * An optional supplemental color to be paired with the `color`. For `dark` theme, this will be the border-color. For `light` theme, this will be the background-color.
+         */
+        "supplementalColor"?: string;
+        /**
+          * The theme to use for this `vertex-color-swatch`. Can be `none`, `light`, or `dark`, and defaults to `none`.  With no theme (`none`), the provided `color` will be used as the background-color, and the border will be a neutral color.  With the `dark` theme, the provided `color` will be used as the background-color, and the `darkened` color will be used for the border-color.  With the `light` theme, the provided `color` will be used as the border-color, and the `lightened` color will be used for the background-color.
+         */
+        "theme"?: ColorSwatchTheme;
+        /**
+          * The variant of this color swatch. Can be either `circle` or `square`, and defaults to `circle`.
+         */
+        "variant"?: ColorSwatchVariant;
     }
     interface VertexContextMenu {
         /**
@@ -2141,9 +2176,9 @@ declare namespace LocalJSX {
         "vertex-chip": VertexChip;
         "vertex-click-to-edit-textfield": VertexClickToEditTextfield;
         "vertex-collapsible": VertexCollapsible;
-        "vertex-color-circle": VertexColorCircle;
         "vertex-color-circle-picker": VertexColorCirclePicker;
         "vertex-color-picker": VertexColorPicker;
+        "vertex-color-swatch": VertexColorSwatch;
         "vertex-context-menu": VertexContextMenu;
         "vertex-dialog": VertexDialog;
         "vertex-draggable-popover": VertexDraggablePopover;
@@ -2187,9 +2222,9 @@ declare module "@stencil/core" {
             "vertex-chip": LocalJSX.VertexChip & JSXBase.HTMLAttributes<HTMLVertexChipElement>;
             "vertex-click-to-edit-textfield": LocalJSX.VertexClickToEditTextfield & JSXBase.HTMLAttributes<HTMLVertexClickToEditTextfieldElement>;
             "vertex-collapsible": LocalJSX.VertexCollapsible & JSXBase.HTMLAttributes<HTMLVertexCollapsibleElement>;
-            "vertex-color-circle": LocalJSX.VertexColorCircle & JSXBase.HTMLAttributes<HTMLVertexColorCircleElement>;
             "vertex-color-circle-picker": LocalJSX.VertexColorCirclePicker & JSXBase.HTMLAttributes<HTMLVertexColorCirclePickerElement>;
             "vertex-color-picker": LocalJSX.VertexColorPicker & JSXBase.HTMLAttributes<HTMLVertexColorPickerElement>;
+            "vertex-color-swatch": LocalJSX.VertexColorSwatch & JSXBase.HTMLAttributes<HTMLVertexColorSwatchElement>;
             "vertex-context-menu": LocalJSX.VertexContextMenu & JSXBase.HTMLAttributes<HTMLVertexContextMenuElement>;
             "vertex-dialog": LocalJSX.VertexDialog & JSXBase.HTMLAttributes<HTMLVertexDialogElement>;
             "vertex-draggable-popover": LocalJSX.VertexDraggablePopover & JSXBase.HTMLAttributes<HTMLVertexDraggablePopoverElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.19",
+  "version": "0.1.0-canary.20",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.21.0",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "5d07d65c2b358d2676ef37741e1298b48a6f072a"
+  "gitHead": "e096346965f339b8566f944e758847547c6f1c1a"
 }

package/dist/cjs/color-picker-876ace00.js

@@ -1,37 +0,0 @@
-'use strict';
-
-const index = require('./index-6a92256c.js');
-const index$1 = require('./index-e1b40fa6.js');
-
-const colorPickerCss = ":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
-
-const ColorPicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueInput = index.createEvent(this, "valueInput", 7);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.handleInput = (event) => {
-      const input = event.target;
-      this.value = input.value || '';
-    };
-    this.handleChange = (event) => {
-      this.valueChanged.emit(this.value);
-    };
-    this.value = undefined;
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("label", { class: index$1.classnames('color-picker', { disabled: this.disabled }) }, index.h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), index.h("div", { class: "selected", style: {
-        'background-color': this.value,
-      }, title: this.value }), index.h("div", { class: "handle" }, index.h("slot", { name: "handle-icon" }, index.h("vertex-icon", { name: "chevron-down", size: "sm" }))))));
-  }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-};
-ColorPicker.style = colorPickerCss;
-
-exports.ColorPicker = ColorPicker;

package/dist/cjs/vertex-color-circle.cjs.entry.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const colorCircle = require('./color-circle-05be54bf.js');
-require('./index-6a92256c.js');
-
-
-
-exports.vertex_color_circle = colorCircle.ColorCircle;

package/dist/collection/components/color-circle/color-circle.css

@@ -1,18 +0,0 @@
-:host {
-  display: flex;
-
-  /*
-  The size of the circle.
-  Defaults to 24px;
-  */
-  --circle-size: 24px;
-}
-
-.root {
-  border-radius: 100%;
-  border-width: 2px;
-  border-style: solid;
-  width: var(--circle-size);
-  height: var(--circle-size);
-  box-sizing: border-box;
-}

package/dist/components/p-20a74d5d.entry.js

@@ -1 +0,0 @@
-export{C as vertex_color_circle}from"./p-d9b9aebe.js";import"./p-6834631c.js";

package/dist/components/p-35e7ab78.entry.js

@@ -1 +0,0 @@
-export{C as vertex_color_picker}from"./p-8434602f.js";import"./p-6834631c.js";import"./p-fe062eb0.js";

package/dist/components/p-7f64b251.entry.js

@@ -1 +0,0 @@
-export{C as vertex_color_circle_picker}from"./p-9374ef6c.js";import"./p-6834631c.js";import"./p-fe062eb0.js";

package/dist/components/p-8434602f.js

@@ -1 +0,0 @@
-import{r as e,e as t,h as i,H as s}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const r=class{constructor(i){e(this,i),this.valueInput=t(this,"valueInput",7),this.valueChanged=t(this,"valueChanged",7),this.handleInput=e=>{this.value=e.target.value||""},this.handleChange=()=>{this.valueChanged.emit(this.value)},this.value=void 0,this.disabled=!1}valueChange(){this.valueInput.emit(this.value)}render(){return i(s,null,i("label",{class:o("color-picker",{disabled:this.disabled})},i("input",{type:"color",class:"input","data-testid":"input",disabled:this.disabled,value:this.value,onInput:this.handleInput,onChange:this.handleChange}),i("div",{class:"selected",style:{"background-color":this.value},title:this.value}),i("div",{class:"handle"},i("slot",{name:"handle-icon"},i("vertex-icon",{name:"chevron-down",size:"sm"})))))}static get watchers(){return{value:["valueChange"]}}};r.style=":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";export{r as C}

package/dist/components/p-d9b9aebe.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as s}from"./p-6834631c.js";const h=class{constructor(e){t(this,e),this.color="#ffffff",this.supplementalColor=void 0,this.theme="dark",this.lightenPercentage=.25,this.darkenPercentage=.25,this.lightened=this.adjustColor(this.color,-this.lightenPercentage),this.darkened=this.adjustColor(this.color,this.darkenPercentage)}handleColorChanged(t){this.lightened=this.adjustColor(t,-this.lightenPercentage),this.darkened=this.adjustColor(t,this.darkenPercentage)}handleLightenPercentageChanged(t){this.lightened=this.adjustColor(this.color,-t)}handleDarkenPercentageChanged(t){this.darkened=this.adjustColor(this.color,t)}render(){const t=null!=this.supplementalColor&&this.supplementalColor.length>0?this.supplementalColor:"dark"===this.theme?this.darkened:this.lightened;return e(s,null,e("div",{class:"root",style:"dark"===this.theme?{backgroundColor:this.color,borderColor:t}:{backgroundColor:t,borderColor:this.color}}))}adjustColor(t,e){if(t.startsWith("#")&&7===t.length){const s=Number(`0x${t.slice(1,3)}`),h=Number(`0x${t.slice(3,5)}`),r=Number(`0x${t.slice(5,7)}`);return`#${this.padHexComponent(this.adjustComponent(s,e).toString(16))}${this.padHexComponent(this.adjustComponent(h,e).toString(16))}${this.padHexComponent(this.adjustComponent(r,e).toString(16))}`}return t}adjustComponent(t,e){return Math.max(0,Math.min(255,Math.floor(t-Math.floor((e<0?255-t:255)*e))))}padHexComponent(t){return`${"0".repeat(2-t.length)}${t}`}static get watchers(){return{color:["handleColorChanged"],lightenPercentage:["handleLightenPercentageChanged"],darkenPercentage:["handleDarkenPercentageChanged"]}}};h.style=":host{display:flex;--circle-size:24px}.root{border-radius:100%;border-width:2px;border-style:solid;width:var(--circle-size);height:var(--circle-size);box-sizing:border-box}";export{h as C}

package/dist/esm/color-picker-2e3b51fa.js

@@ -1,35 +0,0 @@
-import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
-import { c as classnames } from './index-9c609209.js';
-
-const colorPickerCss = ":host{--selected-color-width:30px;--selected-color-height:30px}.color-picker{display:inline-flex;position:relative;background:var(--vertex-ui-neutral-200);border-radius:4px;cursor:pointer}.color-picker.disabled{opacity:0.5;cursor:default}.selected{height:var(--selected-color-height);width:var(--selected-color-width);box-sizing:content-box;border:1px solid var(--vertex-ui-neutral-300);border-radius:4px}.handle{display:flex;align-items:center;padding:0 3px}.input{position:absolute;pointer-events:none;height:100%;width:100%;left:0;top:0;opacity:0}";
-
-const ColorPicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueInput = createEvent(this, "valueInput", 7);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.handleInput = (event) => {
-      const input = event.target;
-      this.value = input.value || '';
-    };
-    this.handleChange = (event) => {
-      this.valueChanged.emit(this.value);
-    };
-    this.value = undefined;
-    this.disabled = false;
-  }
-  valueChange() {
-    this.valueInput.emit(this.value);
-  }
-  render() {
-    return (h(Host, null, h("label", { class: classnames('color-picker', { disabled: this.disabled }) }, h("input", { type: "color", class: "input", "data-testid": "input", disabled: this.disabled, value: this.value, onInput: this.handleInput, onChange: this.handleChange }), h("div", { class: "selected", style: {
-        'background-color': this.value,
-      }, title: this.value }), h("div", { class: "handle" }, h("slot", { name: "handle-icon" }, h("vertex-icon", { name: "chevron-down", size: "sm" }))))));
-  }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-};
-ColorPicker.style = colorPickerCss;
-
-export { ColorPicker as C };

package/dist/esm/vertex-color-circle.entry.js

@@ -1,2 +0,0 @@
-export { C as vertex_color_circle } from './color-circle-842f3321.js';
-import './index-72f28b71.js';