@vertexvis/ui 0.1.5-canary.6 → 1.0.0-testing.0

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

@@ -2,95 +2,95 @@ import { EventEmitter, h } from '../../stencil-public-runtime';
 import { PopoverPlacement } from '../popover/popover';
 export type ColorPickerSizeSize = 'sm' | 'md' | 'lg';
 export interface SelectionChangedDetails {
-  color: string;
-  lightened: string;
-  darkened: string;
+    color: string;
+    lightened: string;
+    darkened: string;
 }
 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-swatch`.
-   */
-  colors: string[] | string;
-  /**
-   * 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 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;
-  /**
-   * 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.
-   */
-  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-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';
-  /**
-   * 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 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;
-  /**
-   * An optional selected color. This will also be updated internally
-   * by the component when individual `vertex-color-swatch` elements
-   * are clicked.
-   */
-  selected?: string;
-  /**
-   * The orientation of this color picker. Can be either `vertical`
-   * or `horizontal`, and defaults to `horizontal`.
-   */
-  direction: 'vertical' | 'horizontal';
-  selectionChanged: EventEmitter<SelectionChangedDetails>;
-  private colorArray;
-  private supplementaryColorArray;
-  private labelMap;
-  componentWillLoad(): void;
-  private handleColorsChange;
-  private handleSupplementalColorsChange;
-  private handleLabelsChange;
-  render(): h.JSX.IntrinsicElements;
-  private handleClick;
-  private parseJsonProp;
+    /**
+     * 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;
+    /**
+     * 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 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;
+    /**
+     * 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.
+     */
+    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-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';
+    /**
+     * 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 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;
+    /**
+     * An optional selected color. This will also be updated internally
+     * by the component when individual `vertex-color-swatch` elements
+     * are clicked.
+     */
+    selected?: string;
+    /**
+     * The orientation of this color picker. Can be either `vertical`
+     * or `horizontal`, and defaults to `horizontal`.
+     */
+    direction: 'vertical' | 'horizontal';
+    selectionChanged: EventEmitter<SelectionChangedDetails>;
+    private colorArray;
+    private supplementaryColorArray;
+    private labelMap;
+    componentWillLoad(): void;
+    private handleColorsChange;
+    private handleSupplementalColorsChange;
+    private handleLabelsChange;
+    render(): h.JSX.IntrinsicElements;
+    private handleClick;
+    private parseJsonProp;
 }

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

@@ -3,50 +3,50 @@ import { ColorSwatchSize } from '../color-swatch/color-swatch';
 export type ColorPickerVariant = 'full' | 'swatch';
 export type ColorPickerExpand = 'full' | 'block';
 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;
-  /**
-   * The expansion behavior of this <vertex-color-picker>.
-   * Can be set to "full" to cause the color picker to stretch to fill
-   * its container, or "block" to cause the color picker to be sized based
-   * on its contents.
-   * Defaults to "block".
-   */
-  expand: ColorPickerExpand;
-  /**
-   * Whether this color picker is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Emitted when a new value is input.
-   */
-  valueInput: EventEmitter<string>;
-  /**
-   * Emitted when the value has changed.
-   */
-  valueChanged: EventEmitter<string>;
-  private valueChange;
-  render(): h.JSX.IntrinsicElements;
-  private handleInput;
-  private handleChange;
-  private getDisplayedValue;
+    /**
+     * 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;
+    /**
+     * The expansion behavior of this <vertex-color-picker>.
+     * Can be set to "full" to cause the color picker to stretch to fill
+     * its container, or "block" to cause the color picker to be sized based
+     * on its contents.
+     * Defaults to "block".
+     */
+    expand: ColorPickerExpand;
+    /**
+     * Whether this color picker is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Emitted when a new value is input.
+     */
+    valueInput: EventEmitter<string>;
+    /**
+     * Emitted when the value has changed.
+     */
+    valueChanged: EventEmitter<string>;
+    private valueChange;
+    render(): h.JSX.IntrinsicElements;
+    private handleInput;
+    private handleChange;
+    private getDisplayedValue;
 }

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

@@ -3,73 +3,73 @@ export type ColorSwatchVariant = 'circle' | 'square';
 export type ColorSwatchSize = 'sm' | 'md' | 'lg';
 export type ColorSwatchTheme = 'none' | 'light' | 'dark';
 export declare class ColorSwatch {
-  /**
-   * 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.
-   */
-  color: 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-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 percentage lighter color to use to compute the `lightened`
-   * color. This will be used when the `theme` is set to `light`.
-   */
-  lightenPercentage: number;
-  /**
-   * 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 lighter color based on the provided `color` and
-   * `lightenPercentage`. This will be used when the `theme` is
-   * set to `light`.
-   */
-  lightened: string;
-  /**
-   * The computed darker color based on the provided `color` and
-   * `darkenPercentage`. This will be used when the `theme` is
-   * set to `dark`.
-   */
-  darkened: string;
-  protected handleColorChanged(newColor: string): void;
-  protected handleLightenPercentageChanged(newPercentage: number): void;
-  protected handleDarkenPercentageChanged(newPercentage: number): void;
-  render(): h.JSX.IntrinsicElements;
-  private getThemeColors;
-  private getSupplementalColor;
-  private adjustColor;
-  private adjustComponent;
-  private padHexComponent;
+    /**
+     * 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.
+     */
+    color: 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-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 percentage lighter color to use to compute the `lightened`
+     * color. This will be used when the `theme` is set to `light`.
+     */
+    lightenPercentage: number;
+    /**
+     * 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 lighter color based on the provided `color` and
+     * `lightenPercentage`. This will be used when the `theme` is
+     * set to `light`.
+     */
+    lightened: string;
+    /**
+     * The computed darker color based on the provided `color` and
+     * `darkenPercentage`. This will be used when the `theme` is
+     * set to `dark`.
+     */
+    darkened: string;
+    protected handleColorChanged(newColor: string): void;
+    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/context-menu/context-menu.d.ts

@@ -1,36 +1,36 @@
 import { h } from '../../stencil-public-runtime';
 export declare class ContextMenu {
-  /**
-   * A CSS selector for the element where this
-   * context menu can be opened.
-   */
-  targetSelector: string;
-  /**
-   * Whether this context menu is animated on open
-   * and close.
-   */
-  animated: boolean;
-  private position?;
-  private open;
-  /**
-   * Emitted when the context menu is opened.
-   */
-  private menuOpened;
-  /**
-   * Emitted when the context menu is closed.
-   */
-  private menuClosed;
-  private target?;
-  private observer;
-  constructor();
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
-  handleTargetSelectorChange(targetSelector?: string): void;
-  render(): h.JSX.IntrinsicElements;
-  private addEventListeners;
-  private removeEventListeners;
-  private handleContextMenu;
-  private handlePointerDown;
-  private handlePointerUp;
-  private handleMenuClosed;
+    /**
+     * A CSS selector for the element where this
+     * context menu can be opened.
+     */
+    targetSelector: string;
+    /**
+     * Whether this context menu is animated on open
+     * and close.
+     */
+    animated: boolean;
+    private position?;
+    private open;
+    /**
+     * Emitted when the context menu is opened.
+     */
+    private menuOpened;
+    /**
+     * Emitted when the context menu is closed.
+     */
+    private menuClosed;
+    private target?;
+    private observer;
+    constructor();
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleTargetSelectorChange(targetSelector?: string): void;
+    render(): h.JSX.IntrinsicElements;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleContextMenu;
+    private handlePointerDown;
+    private handlePointerUp;
+    private handleMenuClosed;
 }

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

@@ -1,58 +1,58 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 export declare class Dialog {
-  /**
-   * Whether this dialog's content is visible.
-   */
-  open: boolean;
-  /**
-   * Whether this dialog should be full screen
-   */
-  fullscreen: boolean;
-  /**
-   * Whether this dialog can be resized.
-   */
-  resizable: boolean;
-  /**
-   * Emitted whenever the dialog's backdrop is clicked.
-   */
-  backdropClick: EventEmitter<void>;
-  /**
-   * Emitted whenever the dialog is closed;
-   */
-  closed: EventEmitter<void>;
-  private hostEl;
-  private width?;
-  private height?;
-  private minWidth?;
-  private minHeight?;
-  private maxWidth?;
-  private maxHeight?;
-  private isResizing;
-  private backdropElement?;
-  private dialogElement?;
-  private mutationObserver;
-  private resizeObserver;
-  private lastPointerPosition?;
-  private initialDialogBoundingRect?;
-  private boundaryPadding?;
-  constructor();
-  protected componentDidLoad(): void;
-  protected componentWillRender(): void;
-  protected disconnectedCallback(): void;
-  clearComputedValues(): void;
-  updateOpened(open?: boolean): void;
-  private keyDownListener;
-  render(): h.JSX.IntrinsicElements;
-  private handleKeyDown;
-  private handlePointerDown;
-  private handlePointerMove;
-  private handlePointerUp;
-  private constrainDimension;
-  private constrainX;
-  private constrainY;
-  private getMaxWidth;
-  private getMaxHeight;
-  private getMinWidth;
-  private getMinHeight;
-  private resize;
+    /**
+     * Whether this dialog's content is visible.
+     */
+    open: boolean;
+    /**
+     * Whether this dialog should be full screen
+     */
+    fullscreen: boolean;
+    /**
+     * Whether this dialog can be resized.
+     */
+    resizable: boolean;
+    /**
+     * Emitted whenever the dialog's backdrop is clicked.
+     */
+    backdropClick: EventEmitter<void>;
+    /**
+     * Emitted whenever the dialog is closed;
+     */
+    closed: EventEmitter<void>;
+    private hostEl;
+    private width?;
+    private height?;
+    private minWidth?;
+    private minHeight?;
+    private maxWidth?;
+    private maxHeight?;
+    private isResizing;
+    private backdropElement?;
+    private dialogElement?;
+    private mutationObserver;
+    private resizeObserver;
+    private lastPointerPosition?;
+    private initialDialogBoundingRect?;
+    private boundaryPadding?;
+    constructor();
+    protected componentDidLoad(): void;
+    protected componentWillRender(): void;
+    protected disconnectedCallback(): void;
+    clearComputedValues(): void;
+    updateOpened(open?: boolean): void;
+    private keyDownListener;
+    render(): h.JSX.IntrinsicElements;
+    private handleKeyDown;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private constrainDimension;
+    private constrainX;
+    private constrainY;
+    private getMaxWidth;
+    private getMaxHeight;
+    private getMinWidth;
+    private getMinHeight;
+    private resize;
 }