@vertexvis/ui 0.1.0-testing.7 → 0.1.0

package/dist/esm/vertex-tabs.entry.js

@@ -0,0 +1,4 @@
+export { T as vertex_tabs } from './tabs-e9f6dcbe.js';
+import './index-72f28b71.js';
+import './index-9c609209.js';
+import './dom-9d0f7bf4.js';

package/dist/esm/vertex-tooltip.entry.js

@@ -1,5 +1,6 @@
-export { T as vertex_tooltip } from './tooltip-933da261.js';
+export { T as vertex_tooltip } from './tooltip-db8ebd41.js';
 import './index-72f28b71.js';
 import './tslib.es6-99cd0de8.js';
 import './index-9c609209.js';
+import './dom-9d0f7bf4.js';
 import './slots-fbb5afb3.js';

package/dist/types/components/color-circle-picker/color-circle-picker.d.ts

@@ -8,12 +8,12 @@ export declare class ColorCirclePicker {
   /**
    * The colors to show in this `vertex-color-circle-picker`.
    * These values will map to the `color` property of the underlying
-   * `vertex-color-circle`.
+   * `vertex-color-swatch`.
    */
   colors: string[] | string;
   /**
    * Optional supplemental colors that will be provided to the
-   * underlying `vertex-color-circle` elements for associated
+   * underlying `vertex-color-swatch` elements for associated
    * indices in the `colors` array.
    */
   supplementalColors: string[] | string;
@@ -22,29 +22,29 @@ export declare class ColorCirclePicker {
    * 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,
+   * 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-circle` elements,
+   * as the background-colors for `vertex-color-swatch` elements,
    * and a `lightened` color will be used for the border-colors.
    */
   theme: 'light' | 'dark';
   /**
    * The percentage lighter color to use to compute the `lightened`
-   * color for the underlying `vertex-color-circle`. This will be
+   * color for the underlying `vertex-color-swatch`. This will be
    * used when the `theme` is set to `light`.
    */
   lightenPercentage: number;
   /**
    * The percentage darker color to use to compute the `darkened`
-   * color for the underlying `vertex-color-circle`. This will be
+   * color for the underlying `vertex-color-swatch`. This will be
    * used when the `theme` is set to `dark`.
    */
   darkenPercentage: number;
   /**
    * An optional selected color. This will also be updated internally
-   * by the component when individual `vertex-color-circle` elements
+   * by the component when individual `vertex-color-swatch` elements
    * are clicked.
    */
   selected?: string;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -1,10 +1,28 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
+import { ColorSwatchSize } from '../color-swatch/color-swatch';
+export type ColorPickerVariant = 'full' | 'swatch';
 export declare class ColorPicker {
   /**
    * Optional value property to set the initial
    * value of this input.
    */
   value?: string;
+  /**
+   * 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;
+  /**
+   * 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;
   /**
    * Whether this color picker is disabled.
    */
@@ -21,4 +39,5 @@ export declare class ColorPicker {
   render(): h.JSX.IntrinsicElements;
   private handleInput;
   private handleChange;
+  private getDisplayedValue;
 }

package/dist/types/components/{color-circle/color-circle.d.ts → color-swatch/color-swatch.d.ts}

@@ -1,7 +1,20 @@
 import { h } from '../../stencil-public-runtime';
-export declare class ColorCircle {
+export type ColorSwatchVariant = 'circle' | 'square';
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+export type ColorSwatchTheme = 'none' | 'light' | 'dark';
+export declare class ColorSwatch {
   /**
-   * The primary color of this `vertex-color-circle`.
+   * The variant of this color swatch. Can be either `circle` or `square`,
+   * and defaults to `circle`.
+   */
+  variant: ColorSwatchVariant;
+  /**
+   * The size of this color swatch. Can be `sm`, `md`, or `lg`,
+   * and defaults to `md`.
+   */
+  size: ColorSwatchSize;
+  /**
+   * 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.
    */
@@ -13,8 +26,11 @@ export declare class ColorCircle {
    */
   supplementalColor?: string;
   /**
-   * The theme to use for this `vertex-color-circle`.
-   * Can be either `light` or `dark`, and defaults to `dark`.
+   * 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
@@ -24,7 +40,7 @@ export declare class ColorCircle {
    * as the border-color, and the `lightened` color will be used
    * for the background-color.
    */
-  theme: 'light' | 'dark';
+  theme: ColorSwatchTheme;
   /**
    * The percentage lighter color to use to compute the `lightened`
    * color. This will be used when the `theme` is set to `light`.
@@ -51,6 +67,8 @@ export declare class ColorCircle {
   protected handleLightenPercentageChanged(newPercentage: number): void;
   protected handleDarkenPercentageChanged(newPercentage: number): void;
   render(): h.JSX.IntrinsicElements;
+  private getThemeColors;
+  private getSupplementalColor;
   private adjustColor;
   private adjustComponent;
   private padHexComponent;

package/dist/types/components/color-swatch/lib.d.ts

@@ -0,0 +1 @@
+export declare function isValidHexColor(color: string): boolean;

package/dist/types/components/icon/icons/arrow-left-circled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const ArrowLeftCircled: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/arrow-right-circled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const ArrowRightCircled: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/camera-add.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const CameraAdd: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/caution.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Caution: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/columns-add.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const ColumnsAdd: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/compare.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Compare: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/compress.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Compress: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/cube-stack.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const CubeStack: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/expand.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Expand: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/file-folder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const FileFolder: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/pin-text-square.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const PinTextSquare: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/plus-with-arrow.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const PlusWithArrow: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/pmi.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const PMI: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/report.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Report: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/square-dot-outline.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const SquareDotOutline: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/update.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Update: () => h.JSX.IntrinsicElements;

package/dist/types/components/icon/icons/views.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { h } from '../../../stencil-public-runtime';
+export declare const Views: () => h.JSX.IntrinsicElements;

package/dist/types/components/index.d.ts

@@ -8,9 +8,9 @@ export * from './card-group/card-group';
 export * from './chip/chip';
 export * from './click-to-edit-text-field/click-to-edit-text-field';
 export * from './collapsible/collapsible';
-export * from './color-circle/color-circle';
 export * from './color-circle-picker/color-circle-picker';
 export * from './color-picker/color-picker';
+export * from './color-swatch/color-swatch';
 export * from './context-menu/context-menu';
 export * from './dialog/dialog';
 export * from './draggable-popover/draggable-popover';
@@ -32,6 +32,8 @@ export * from './search-bar/search-bar';
 export * from './select/select';
 export * from './slider/slider';
 export * from './spinner/spinner';
+export * from './tab/tab';
+export * from './tabs/tabs';
 export * from './text-field/text-field';
 export * from './toast/toast';
 export * from './toggle/toggle';

package/dist/types/components/result-list/result-list.d.ts

@@ -1,10 +1,7 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 import { PopoverPlacement } from '../popover/popover';
-export type Result = {
-  id: string;
-  type: string;
-} & Record<string, unknown>;
+import { Result } from './types';
 export declare class ResultList {
   items: Result[];
   itemsJson?: string;

package/dist/types/components/result-list/types.d.ts

@@ -0,0 +1,4 @@
+export type Result = {
+  id: string;
+  type: string;
+} & Record<string, unknown>;

package/dist/types/components/search-bar/dom.d.ts

@@ -1,3 +1,8 @@
 export declare const getWindowSelection: () => Selection | undefined | null;
+export declare const nodeHasChildNodes: (node: Node) => boolean;
 export declare const createDocumentRange: () => Range;
-export declare const createTextNode: (text?: string) => Text;
+export declare const createTextNode: (text: string) => Text;
+export declare const createBreak: () => HTMLBRElement;
+export declare const createWrappingDiv: (nodes: Node[]) => HTMLDivElement;
+export declare const isHtmlElement: (node?: Node | EventTarget | null) => node is HTMLElement;
+export declare const isBrElement: (node: Node) => node is HTMLBRElement;

package/dist/types/components/search-bar/lib.d.ts

@@ -1,12 +1,31 @@
-import { Result } from '../result-list/result-list';
+import { Result } from '../result-list/types';
 export interface SearchResultReplacement {
   before: Text;
   beforeSpace: Text;
   result: Text;
-  afterSpace?: Text;
+  afterSpace: Text;
   after?: Text;
 }
 export declare const createResultUri: (result: Result) => string;
 export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
-export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement) => Text[];
+/**
+ * Newline characters and spaces are represented slightly differently within a
+ * content editable element between browsers. This method standardizes the
+ * representation of those characters to avoid having to write branching logic
+ * to support each individual browser.
+ */
+export declare const standardizeNewlinesAndSpaces: (node: ChildNode) => ChildNode[];
+export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement, isBreaking?: boolean) => Text[];
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 export declare const trimNonstandardSpaces: (text: string) => string;

package/dist/types/components/search-bar/search-bar.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { PopoverPlacement } from '../popover/popover';
-import { Result } from '../result-list/result-list';
+import { Result } from '../result-list/types';
 export type SearchBarVariant = 'standard' | 'filled' | 'underlined' | 'blank';
 export declare class SearchBar {
   /**
@@ -98,7 +98,7 @@ export declare class SearchBar {
    */
   inputBlur: EventEmitter<FocusEvent>;
   private hostEl;
-  private cursorPosition;
+  private cursorPosition?;
   private displayedElements;
   private hasTriggered;
   private contentEl?;
@@ -121,9 +121,25 @@ export declare class SearchBar {
   private handleFocus;
   private handleBlur;
   private handleResultClick;
+  private attemptReplaceElement;
   private isIdenticalElement;
   private getTextContent;
   private getCursorPosition;
+  /**
+   * Inspects the cursor position for the following conditions:
+   *
+   * 1. The cursor has moved to text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event and display the results.
+   *
+   * 2. The cursor has moved within text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event to update the currently displayed results.
+   *
+   * 3. The cursor has moved to text that does not contain a valid
+   * string and trigger character, indicating we need to hide any
+   * displayed search results.
+   */
   private handleCursorPositionUpdate;
   private readTriggerValue;
   private includesBreakCharacter;

package/dist/types/components/slider/slider.d.ts

@@ -43,6 +43,7 @@ export declare class Slider {
    * An event that is emitted as the slider is being dragged.
    */
   valueInput: EventEmitter<SliderChangeEventDetails>;
+  private hostEl;
   render(): h.JSX.IntrinsicElements;
   private handleChange;
   private handleInput;

package/dist/types/components/tab/tab.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tab {
+  /**
+   * The label to include in tab list.
+   */
+  label: string;
+  active: boolean;
+  tabClick: EventEmitter<string>;
+  render(): h.JSX.IntrinsicElements;
+  private handleClick;
+}

package/dist/types/components/tab/util.d.ts

@@ -0,0 +1 @@
+export declare function isTabElement(element: Element): element is HTMLVertexTabElement;

package/dist/types/components/tabs/tabs.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tabs {
+  active?: string;
+  private labels;
+  private activeBounds?;
+  private activeButtonEl?;
+  private hostEl;
+  /**
+   * An event that is emitted whenever the selected tab changes
+   * and contains the label of the newly selected tab.
+   */
+  selectedTabChanged: EventEmitter<string>;
+  private indicatorInitialized;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  protected componentDidUpdate(): void;
+  protected handleActiveButtonChange(): void;
+  render(): h.JSX.IntrinsicElements;
+  private handleLabelClick;
+  private updateActiveOnTab;
+  private findTabByLabel;
+  private updateTabLabels;
+}