@vertexvis/ui 0.1.4-canary.2 → 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 { SelectionChangedDetails } from "./components/color-circle-picker/color-circle-picker";
+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,10 @@ 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.
          */
@@ -866,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;
     }
@@ -1498,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`.
          */
@@ -1507,6 +1527,10 @@ 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.
          */
@@ -2245,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

@@ -74,6 +74,8 @@ export declare enum IconNames {
   'help' = "help",
   'info' = "info",
   'invert' = "invert",
+  'label' = "label",
+  'label-off' = "label-off",
   'line' = "line",
   'line-dot-left' = "line-dot-left",
   'line-dot-right' = "line-dot-right",
@@ -119,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.2",
+  "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": "062093a784993026f3b34f55f07e51d0a5563c5b"
+  "gitHead": "fdbaa970a03172d27c2d3551fe53ead86d2d41b9"
 }

package/dist/components/p-4eace800.entry.js

@@ -1 +0,0 @@
-export{B as vertex_banner}from"./p-7cf1a62a.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-401ba354.js";

package/dist/components/p-5c7f8967.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon_button}from"./p-6168ca0a.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-401ba354.js";

package/dist/components/p-79da1778.entry.js

@@ -1 +0,0 @@
-export{I as vertex_icon}from"./p-1d764f4f.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-401ba354.js";

package/dist/components/p-8bbc344d.entry.js

@@ -1 +0,0 @@
-export{C as vertex_color_swatch}from"./p-d539f530.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-3438c441.js";

package/dist/components/p-b9dab446.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.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:"lg",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-d2d75bcf.entry.js

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

package/dist/components/p-d539f530.js

@@ -1 +0,0 @@
-import{r as t,h as r,H as e}from"./p-6834631c.js";import{c as s}from"./p-fe062eb0.js";import{i}from"./p-3438c441.js";const o=class{constructor(r){t(this,r),this.variant="circle",this.size="md",this.color="#ffffff",this.supplementalColor=void 0,this.theme="none",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(){return r(e,null,r("div",{class:s("root",this.variant,this.size),style:this.getThemeColors()},r("div",{class:"overlay"},r("slot",{name:"overlay"}))))}getThemeColors(){const t=this.getSupplementalColor();switch(this.theme){case"light":return{backgroundColor:t,borderColor:this.color};case"dark":return{backgroundColor:this.color,borderColor:t};default:return{backgroundColor:this.color,borderColor:null!=t?t:void 0}}}getSupplementalColor(){const t=null!=this.supplementalColor&&this.supplementalColor.length>0?this.supplementalColor:void 0;switch(this.theme){case"light":return null!=t?t:this.lightened;case"dark":return null!=t?t:this.darkened;default:return t}}adjustColor(t,r){if(i(t)){const e=Number(`0x${t.slice(1,3)}`),s=Number(`0x${t.slice(3,5)}`),i=Number(`0x${t.slice(5,7)}`);return`#${this.padHexComponent(this.adjustComponent(e,r).toString(16))}${this.padHexComponent(this.adjustComponent(s,r).toString(16))}${this.padHexComponent(this.adjustComponent(i,r).toString(16))}`}return t}adjustComponent(t,r){return Math.max(0,Math.min(255,Math.floor(t-Math.floor((r<0?255-t:255)*r))))}padHexComponent(t){return`${"0".repeat(2-t.length)}${t}`}static get watchers(){return{color:["handleColorChanged"],lightenPercentage:["handleLightenPercentageChanged"],darkenPercentage:["handleDarkenPercentageChanged"]}}};o.style=":host{display:flex}.root{position:relative;border-style:solid;border-color:var(--vertex-ui-neutral-300);box-sizing:border-box}.root.circle{border-width:2px;border-radius:100%}.root.square{border-width:1px;border-radius:3px}.root.sm{width:16px;height:16px}.root.md{width:20px;height:20px}.root.lg{width:24px;height:24px}.overlay{position:absolute;width:100%;height:100%;border-radius:2px;overflow:hidden}";export{o as C}