@esri/calcite-components/dist/components/calcite-color-picker/customElement.d.ts

Web Components for Esri's Calcite Design System.

/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Scale } from "../interfaces.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { Format } from "./utils.js";
import type { ColorValue } from "./interfaces.js";

/**
 * @cssproperty [--calcite-color-picker-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-color-picker-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-color-picker-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-color-picker-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-color-picker-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-color-picker-input-background-color] - Specifies the component's input background color.
 * @cssproperty [--calcite-color-picker-input-border-color] - Specifies the component's input border color.
 * @cssproperty [--calcite-color-picker-input-text-color] - Specifies the component's input text color.
 * @cssproperty [--calcite-color-picker-input-prefix-text-color] - When `hexDisabled` is not `true`, specifies the component's input prefix text color.
 * @cssproperty [--calcite-color-picker-input-suffix-text-color] - When `alphaChannel` is `true`, specifies the component's input suffix text color.
 * @cssproperty [--calcite-color-picker-tab-border-color] - Specifies the component's tab border color.
 * @cssproperty [--calcite-color-picker-tab-text-color] - Specifies the component's tab text color.
 * @cssproperty [--calcite-color-picker-tab-accent-color-press] - Specifies the component's tab accent color when selected or active.
 * @cssproperty [--calcite-color-picker-swatch-corner-radius] - Specifies the component's swatch corner radius.
 * @cssproperty [--calcite-color-picker-action-text-color-press] - Specifies the component's `savedColors` action text color when pressed.
 * @cssproperty [--calcite-color-picker-action-text-color-hover] - Specifies the component's `savedColors` action text color when hovered.
 * @cssproperty [--calcite-color-picker-action-text-color] - Specifies the component's `savedColors` action text color.
 */
export abstract class ColorPicker extends LitElement {
  /**
   * When `true`, the component will allow updates to the color's alpha value.
   *
   * @default false
   */
  accessor alphaChannel: boolean;
  /**
   * When `true`, hides the RGB/HSV channel inputs.
   *
   * @default false
   */
  accessor channelsDisabled: boolean;
  /**
   * When `true`, an empty color (`null`) will be allowed as a `value`.
   *
   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
   *
   * @default false
   */
  accessor clearable: boolean;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * When `true`, hides the color field.
   *
   * @default false
   */
  accessor fieldDisabled: boolean;
  /**
   * The format of `value`.
   *
   * When `"auto"`, the format will be inferred from `value` when set.
   *
   * @default "auto"
   */
  accessor format: Format;
  /**
   * When `true`, hides the hex input.
   *
   * @default false
   */
  accessor hexDisabled: boolean;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      b?: string;
      blue?: string;
      deleteColor?: string;
      g?: string;
      green?: string;
      h?: string;
      hsv?: string;
      hex?: string;
      hue?: string;
      noColor?: string;
      opacity?: string;
      r?: string;
      red?: string;
      rgb?: string;
      s?: string;
      saturation?: string;
      saveColor?: string;
      saved?: string;
      v?: string;
      value?: string;
  };
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When `true`, hides the saved colors section.
   *
   * @default false
   */
  accessor savedDisabled: boolean;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /** Specifies the storage ID for colors. */
  accessor storageId: string;
  /**
   * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
   *
   * The type will be preserved as the color is updated.
   *
   * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color),
   * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/color-picker/interfaces.ts#L10).
   */
  accessor value: ColorValue | null;
  /**
   * Sets focus on the component's first focusable element.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /** Fires when the color value has changed. */
  readonly calciteColorPickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /**
   * Fires as the color value changes.
   *
   * Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.
   */
  readonly calciteColorPickerInput: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteColorPickerChange: ColorPicker["calciteColorPickerChange"]["detail"];
    calciteColorPickerInput: ColorPicker["calciteColorPickerInput"]["detail"];
  };
}