@vertexvis/ui 0.1.4-canary.3 → 0.1.4-canary.4

package/dist/types/components.d.ts

@@ -12,12 +12,12 @@ import { ButtonColor, ButtonExpand, ButtonSize, ButtonType, ButtonVariant } from
 import { CardMode } from "./components/card/card";
 import { ChipColor, ChipVariant } from "./components/chip/chip";
 import { InputChangeEventDetail, TextSize } from "./components/text-field/text-field";
+import { Popover, PopoverPlacement } from "./components/popover/popover";
 import { ColorPickerSizeSize, SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
 import { ColorSwatchSize } from "./components/color-swatch/color-swatch";
 import { ColorPickerExpand, 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";
 import { IconName, IconSize } from "./types/icon";
 import { IconButtonIconColor, IconButtonVariant } from "./components/icon-button/icon-button";
@@ -240,6 +240,14 @@ export namespace Components {
           * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
          */
         "direction": 'vertical' | 'horizontal';
+        /**
+          * The placement of the tooltip around the swatch elements. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
+         */
+        "labelPlacement": PopoverPlacement;
+        /**
+          * Optional labels that will be displayed as a tooltip on the underlying `vertex-color-swatch` elements for associated colors in the `colors` array.
+         */
+        "labels": Record<string, string> | string;
         /**
           * 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`.
          */
@@ -248,6 +256,9 @@ export namespace Components {
           * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
         "selected"?: string;
+        /**
+          * The size of this color picker. Can be `sm`, `md`, or `lg`, and defaults to `lg`.
+         */
         "size": ColorPickerSizeSize;
         /**
           * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
@@ -867,7 +878,7 @@ export namespace Components {
          */
         "disabled"?: boolean;
         /**
-          * The placement of the tooltip at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
+          * The placement of the tooltip around the slotted element. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
          */
         "placement": PopoverPlacement;
     }
@@ -1499,6 +1510,14 @@ declare namespace LocalJSX {
           * The orientation of this color picker. Can be either `vertical` or `horizontal`, and defaults to `horizontal`.
          */
         "direction"?: 'vertical' | 'horizontal';
+        /**
+          * The placement of the tooltip around the swatch elements. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
+         */
+        "labelPlacement"?: PopoverPlacement;
+        /**
+          * Optional labels that will be displayed as a tooltip on the underlying `vertex-color-swatch` elements for associated colors in the `colors` array.
+         */
+        "labels"?: Record<string, string> | string;
         /**
           * 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`.
          */
@@ -1508,6 +1527,9 @@ declare namespace LocalJSX {
           * An optional selected color. This will also be updated internally by the component when individual `vertex-color-swatch` elements are clicked.
          */
         "selected"?: string;
+        /**
+          * The size of this color picker. Can be `sm`, `md`, or `lg`, and defaults to `lg`.
+         */
         "size"?: ColorPickerSizeSize;
         /**
           * Optional supplemental colors that will be provided to the underlying `vertex-color-swatch` elements for associated indices in the `colors` array.
@@ -2247,7 +2269,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The placement of the tooltip at the clicked point. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
+          * The placement of the tooltip around the slotted element. This can be any of the following values:  'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', or 'auto-end', and defaults to 'bottom'.  Note: placement will adjust based on the amount of available space, so tooltips close to screen edges may appear in a different location.
          */
         "placement"?: PopoverPlacement;
     }

package/dist/types/types/icon.d.ts

@@ -121,6 +121,7 @@ export declare enum IconNames {
   'snapshots' = "snapshots",
   'star' = "star",
   'square-dot-outline' = "square-dot-outline",
+  'tag' = "tag",
   'tape-measure' = "tape-measure",
   'teleport-and-align' = "teleport-and-align",
   'teleport-toward' = "teleport-toward",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.4-canary.3",
+  "version": "0.1.4-canary.4",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.23.2",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "88e78796ea92f8a33be8056c906389cc0b57aa97"
+  "gitHead": "fdbaa970a03172d27c2d3551fe53ead86d2d41b9"
 }

package/dist/components/p-884ce830.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon_button}from"./p-20ccb73e.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-09a91501.js";

package/dist/components/p-b0f419b4.entry.js

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

package/dist/components/p-c5d3024f.js

@@ -1 +0,0 @@
-import{r as e,e as t,h as i,H as r}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const l=class{constructor(i){e(this,i),this.selectionChanged=t(this,"selectionChanged",7),this.colorArray=[],this.supplementaryColorArray=[],this.handleClick=e=>{const t=e.target;this.selectionChanged.emit({color:t.color,lightened:t.lightened,darkened:t.darkened})},this.colors=["#4c87be","#f3d336","#6fbb29","#e38826","#c72e16","#8c3681","#000000","#ffffff"],this.size="lg",this.supplementalColors=[],this.theme="dark",this.lightenPercentage=.25,this.darkenPercentage=.25,this.selected=void 0,this.direction="horizontal"}componentWillLoad(){this.handleColorsChange(this.colors),this.handleSupplementalColorsChange(this.supplementalColors)}handleColorsChange(e){this.colorArray="string"==typeof e?JSON.parse(e):e}handleSupplementalColorsChange(e){this.supplementaryColorArray="string"==typeof e?JSON.parse(e):e}render(){return i(r,null,i("div",{class:o("container",{vertical:"vertical"===this.direction})},this.colorArray.map(((e,t)=>i("vertex-color-swatch",{class:o("circle",{selected:this.selected===e}),variant:"circle",size:this.size,color:e,supplementalColor:this.supplementaryColorArray[t],onClick:this.handleClick,lightenPercentage:this.lightenPercentage,darkenPercentage:this.darkenPercentage,theme:this.theme})))))}static get watchers(){return{colors:["handleColorsChange"],supplementalColors:["handleSupplementalColorsChange"]}}};l.style=":host{display:flex;--color-circle-spacing:1rem;--color-circle-hovered-outline:2px solid var(--vertex-ui-neutral-700);--color-circle-selected-outline:var(--color-circle-hovered-outline)}.container{display:flex;gap:var(--color-circle-spacing)}.container.vertical{flex-direction:column;justify-content:center}.container.horizontal{align-items:center}.circle{cursor:pointer;outline-offset:3px;border-radius:100%}.circle.selected{outline:var(--color-circle-selected-outline)}.circle:hover{outline:var(--color-circle-hovered-outline)}";export{l as C}

package/dist/components/p-c9134aec.entry.js

@@ -1 +0,0 @@
-export{B as vertex_banner}from"./p-4d0c2f7b.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-09a91501.js";

package/dist/components/p-ec870a45.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon}from"./p-476a4e15.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-09a91501.js";