@esri/calcite-components 1.4.0-next.4 → 1.4.0-next.6

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

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import Color from "color";
+import { Channels, ColorMode, ColorValue, InternalColor } from "./interfaces";
 import { Scale } from "../interfaces";
-import { ColorMode, ColorValue, InternalColor } from "./interfaces";
 import { Format } from "./utils";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LoadableComponent } from "../../utils/loadable";
@@ -14,6 +14,13 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
    * 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`.
    */
   allowEmpty: boolean;
+  /**
+   * When true, the component will allow updates to the color's alpha value.
+   */
+  alphaChannel: boolean;
+  handleAlphaChannelChange(alphaChannel: boolean): void;
+  /** When true, hides the RGB/HSV channel inputs */
+  channelsDisabled: boolean;
   /**
    * Internal prop for advanced use-cases.
    *
@@ -33,13 +40,29 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
    * @default "auto"
    */
   format: Format;
-  handleFormatChange(format: ColorPicker["format"]): void;
-  /** When `true`, hides the Hex input. */
-  hideHex: boolean;
-  /** When `true`, hides the RGB/HSV channel inputs. */
+  handleFormatChange(format: Format): void;
+  /**
+   * When `true`, hides the RGB/HSV channel inputs.
+   *
+   * @deprecated use `channelsDisabled` instead
+   */
   hideChannels: boolean;
-  /** When `true`, hides the saved colors section. */
+  /** When true, hides the hex input */
+  hexDisabled: boolean;
+  /**
+   * When `true`, hides the hex input.
+   *
+   * @deprecated use `hexDisabled` instead
+   */
+  hideHex: boolean;
+  /**
+   * When `true`, hides the saved colors section.
+   *
+   * @deprecated use `savedDisabled` instead
+   */
   hideSaved: boolean;
+  /** When true, hides the saved colors section */
+  savedDisabled: boolean;
   /** Specifies the size of the component. */
   scale: Scale;
   handleScaleChange(scale?: Scale): void;
@@ -63,22 +86,22 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
    */
   value: ColorValue | null;
   handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void;
+  private activeCanvasInfo;
   private get baseColorFieldColor();
-  private activeColorFieldAndSliderRect;
-  private colorFieldAndSliderHovered;
-  private fieldAndSliderRenderingContext;
+  private checkerPattern;
+  private colorFieldRenderingContext;
   private colorFieldScopeNode;
-  private hueThumbState;
+  private hueSliderRenderingContext;
   private hueScopeNode;
   private internalColorUpdateContext;
-  private previousColor;
   private mode;
+  private opacityScopeNode;
+  private opacitySliderRenderingContext;
+  private previousColor;
   private shiftKeyChannelAdjustment;
-  private sliderThumbState;
   defaultMessages: ColorPickerMessages;
-  colorFieldAndSliderInteractive: boolean;
   channelMode: ColorMode;
-  channels: [number, number, number];
+  channels: Channels;
   dimensions: {
     slider: {
       height: number;
@@ -103,9 +126,9 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   savedColors: string[];
   colorFieldScopeTop: number;
   colorFieldScopeLeft: number;
-  scopeOrientation: "vertical" | "horizontal";
   hueScopeLeft: number;
-  hueScopeTop: number;
+  opacityScopeLeft: number;
+  scopeOrientation: "vertical" | "horizontal";
   /**
    * Fires when the color value has changed.
    */
@@ -125,11 +148,11 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   protected handleChannelKeyUpOrDown(event: KeyboardEvent): void;
   private handleChannelChange;
   private handleSavedColorKeyDown;
-  private handleColorFieldAndSliderPointerLeave;
-  private handleColorFieldAndSliderPointerDown;
+  private handleColorFieldPointerDown;
+  private handleHueSliderPointerDown;
+  private handleOpacitySliderPointerDown;
   private globalPointerUpHandler;
   private globalPointerMoveHandler;
-  private handleColorFieldAndSliderPointerEnterOrMove;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
   componentWillLoad(): Promise<void>;
@@ -146,25 +169,33 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   handleKeyDown(event: KeyboardEvent): void;
   private showIncompatibleColorWarning;
   private setMode;
+  private ensureCompatibleMode;
   private captureHueSliderColor;
-  private getCanvasRegion;
+  private captureOpacitySliderValue;
   private internalColorSet;
   private toValue;
   private getSliderCapSpacing;
   private updateDimensions;
   private deleteColor;
   private saveColor;
-  private drawColorFieldAndSlider;
+  private drawColorControls;
   private drawColorField;
   private setCanvasContextSize;
   private captureColorFieldColor;
-  private initColorFieldAndSlider;
+  private initColorField;
+  private initHueSlider;
+  private initOpacitySlider;
   private updateCanvasSize;
-  private containsPoint;
   private drawActiveColorFieldColor;
   private drawThumb;
   private drawActiveHueSliderColor;
   private drawHueSlider;
+  private drawOpacitySlider;
+  private drawSliderPath;
+  private getCheckeredBackgroundPattern;
+  private drawActiveOpacitySliderColor;
+  private storeOpacityScope;
+  private handleOpacityScopeKeyDown;
   private updateColorFromChannels;
   private updateChannelsFromColor;
   private toChannels;

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

@@ -1,5 +1,6 @@
 import type Color from "color";
 export type ColorMode = "rgb" | "hsv";
+export type Channels = [number, number, number, number];
 export type InternalColor = Color;
 export type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;
 export interface RGB {

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

@@ -1,29 +1,35 @@
 import Color from "color";
 export declare const CSS: {
+  channel: string;
+  channels: string;
+  colorField: string;
+  colorFieldScope: string;
+  colorMode: string;
+  colorModeContainer: string;
   container: string;
+  control: string;
+  controlAndScope: string;
   controlSection: string;
-  hexOptions: string;
-  section: string;
+  deleteColor: string;
   header: string;
-  control: string;
-  splitSection: string;
-  colorModeContainer: string;
-  colorMode: string;
-  channels: string;
-  channel: string;
-  savedColors: string;
-  savedColorsSection: string;
+  hexAndChannelsGroup: string;
+  hexOptions: string;
+  hueScope: string;
+  hueSlider: string;
+  opacityScope: string;
+  opacitySlider: string;
+  preview: string;
+  previewAndSliders: string;
   saveColor: string;
-  deleteColor: string;
+  savedColor: string;
+  savedColors: string;
   savedColorsButtons: string;
-  headerHex: string;
-  colorFieldAndSlider: string;
-  colorFieldAndSliderInteractive: string;
-  colorFieldAndSliderWrap: string;
+  savedColorsSection: string;
   scope: string;
-  hueScope: string;
-  colorFieldScope: string;
-  savedColor: string;
+  section: string;
+  slider: string;
+  sliders: string;
+  splitSection: string;
 };
 export declare const DEFAULT_COLOR: Color<"#007AC2">;
 export declare const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
@@ -37,6 +43,10 @@ export declare const HSV_LIMITS: {
   s: number;
   v: number;
 };
+export declare const OPACITY_LIMITS: {
+  min: number;
+  max: number;
+};
 export declare const DIMENSIONS: {
   s: {
     slider: {

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

@@ -1,12 +1,18 @@
-import { ColorValue, RGB } from "./interfaces";
+import { ColorValue, HSLA, HSVA, RGB, RGBA } from "./interfaces";
 import Color from "color";
-export declare function rgbToHex(color: RGB): string;
 export declare const hexChar: RegExp;
-export declare function isValidHex(hex: string): boolean;
-export declare function isShorthandHex(hex: string): boolean;
-export declare function isLonghandHex(hex: string): boolean;
-export declare function normalizeHex(hex: string): string;
-export declare function hexToRGB(hex: string): RGB;
+export declare const alphaToOpacity: (alpha: number) => number;
+export declare const opacityToAlpha: (opacity: number) => number;
+export declare function isValidHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function canConvertToHexa(hex: string): boolean;
+export declare function isShorthandHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function isLonghandHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function normalizeHex(hex: string, hasAlpha?: boolean, convertFromHexToHexa?: boolean): string;
+export declare function hexify(color: Color, hasAlpha?: boolean): string;
+export declare function rgbToHex(color: RGB | RGBA): string;
+export declare function normalizeAlpha<T extends RGBA | HSVA | HSLA>(colorObject: ReturnType<Color["object"]>): T;
+export declare function normalizeColor(alphaColorObject: RGBA | HSVA | HSLA): ReturnType<Color["object"]>;
+export declare function hexToRGB(hex: string, hasAlpha?: boolean): RGB | RGBA;
 type Enumify<T> = T[keyof T];
 export declare const CSSColorMode: {
   HEX: "hex";
@@ -30,4 +36,7 @@ export type SupportedMode = CSSColorMode | ObjectColorMode;
 export type Format = "auto" | SupportedMode;
 export declare function parseMode(colorValue: ColorValue): SupportedMode | null;
 export declare function colorEqual(value1: Color | null, value2: Color | null): boolean;
+export declare function alphaCompatible(mode: SupportedMode): boolean;
+export declare function toAlphaMode(mode: SupportedMode): SupportedMode;
+export declare function toNonAlphaMode(mode: SupportedMode): SupportedMode;
 export {};

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

@@ -1,14 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
 import Color from "color";
 import { LoadableComponent } from "../../utils/loadable";
 import { NumberingSystem } from "../../utils/locale";
-import { Scale } from "../interfaces";
+import { ColorPickerMessages } from "../color-picker/assets/color-picker/t9n";
 export declare class ColorPickerHexInput implements LoadableComponent {
   el: HTMLCalciteColorPickerHexInputElement;
-  /**
-   * Specifies accessible label for the input field.
-   */
-  hexLabel: string;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
@@ -18,35 +15,55 @@ export declare class ColorPickerHexInput implements LoadableComponent {
    * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
    */
   allowEmpty: boolean;
+  /**
+   * When true, the component will allow updates to the color's alpha value.
+   */
+  alphaChannel: boolean;
+  /**
+   * Specifies accessible label for the input field.
+   *
+   * @deprecated use `messages` instead
+   */
+  hexLabel: string;
+  /**
+   * Messages are passed by parent component for accessible labels.
+   *
+   * @internal
+   */
+  messages: ColorPickerMessages;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  numberingSystem?: NumberingSystem;
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * The Hex value.
+   * The hex value.
    */
   value: string;
-  /** Specifies the Unicode numeral system used by the component for localization. */
-  numberingSystem?: NumberingSystem;
   handleValueChange(value: string, oldValue: string): void;
   /**
    * Emitted when the hex value changes.
    */
   calciteColorPickerHexInputChange: EventEmitter<void>;
-  private onCalciteInternalInputBlur;
-  private onInputChange;
-  protected onInputKeyDown(event: KeyboardEvent): void;
-  private onPaste;
-  private inputNode;
+  private onHexInputBlur;
+  private onOpacityInputBlur;
+  private onHexInputChange;
+  private onOpacityInputChange;
+  protected onInputKeyDown: (event: KeyboardEvent) => void;
+  private onHexInputPaste;
+  private hexInputNode;
   /**
    * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
    */
   internalColor: Color | null;
+  private opacityInputNode;
   private previousNonNullValue;
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private internalSetValue;
-  private storeInputRef;
-  private formatForInternalInput;
+  private storeHexInputRef;
+  private storeOpacityInputRef;
+  private formatHexForInternalInput;
+  private formatOpacityForInternalInput;
   private nudgeRGBChannels;
-  handleKeyDown(event: KeyboardEvent): void;
 }

package/dist/types/components/color-picker-hex-input/resources.d.ts

@@ -1,5 +1,5 @@
 export declare const CSS: {
   container: string;
-  preview: string;
-  input: string;
+  hexInput: string;
+  opacityInput: string;
 };

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

@@ -10,8 +10,8 @@ export declare class ColorPickerSwatch {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
    */
-  color: string;
-  handleColorChange(color: string): void;
+  color: string | null;
+  handleColorChange(color: string | null): void;
   /**
    * Specifies the size of the component.
    */
@@ -20,4 +20,5 @@ export declare class ColorPickerSwatch {
   private internalColor;
   componentWillLoad(): void;
   render(): VNode;
+  renderSwatch(): VNode;
 }

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

@@ -1,8 +1,13 @@
 export declare const CSS: {
   swatch: string;
-  noColorIcon: string;
+  noColorSwatch: string;
+  checker: string;
 };
 export declare const COLORS: {
   borderLight: string;
   borderDark: string;
 };
+export declare const CHECKER_DIMENSIONS: {
+  squareSize: number;
+  size: number;
+};

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

@@ -68,13 +68,18 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    */
   selectionAppearance: SelectionAppearance;
   handleSelectionAppearanceChange(): void;
+  /**
+   * Emits when any of the list item selections have changed.
+   */
+  calciteListChange: EventEmitter<void>;
   /**
    * Emits when the component's filter has changed.
    */
   calciteListFilter: EventEmitter<void>;
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
-  handleCalciteListItemActive(event: CustomEvent): void;
-  handleCalciteListItemSelect(event: CustomEvent): void;
+  handleCalciteInternalListItemActive(event: CustomEvent): void;
+  handleCalciteListItemSelect(): void;
+  handleCalciteInternalListItemSelect(event: CustomEvent): void;
   handleCalciteListItemClose(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/types/components/list/resources.d.ts

@@ -5,5 +5,5 @@ export declare const CSS: {
   tableContainer: string;
   sticky: string;
 };
-export declare const debounceTimeout = 100;
+export declare const debounceTimeout = 0;
 export type SelectionAppearance = "border" | "icon";

package/dist/types/components.d.ts

@@ -764,6 +764,14 @@ export namespace Components {
           * 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`.
          */
         "allowEmpty": boolean;
+        /**
+          * When true, the component will allow updates to the color's alpha value.
+         */
+        "alphaChannel": boolean;
+        /**
+          * When true, hides the RGB/HSV channel inputs
+         */
+        "channelsDisabled": boolean;
         /**
           * Internal prop for advanced use-cases.
          */
@@ -777,16 +785,23 @@ export namespace Components {
           * @default "auto"
          */
         "format": Format;
+        /**
+          * When true, hides the hex input
+         */
+        "hexDisabled": boolean;
         /**
           * When `true`, hides the RGB/HSV channel inputs.
+          * @deprecated use `channelsDisabled` instead
          */
         "hideChannels": boolean;
         /**
-          * When `true`, hides the Hex input.
+          * When `true`, hides the hex input.
+          * @deprecated use `hexDisabled` instead
          */
         "hideHex": boolean;
         /**
           * When `true`, hides the saved colors section.
+          * @deprecated use `savedDisabled` instead
          */
         "hideSaved": boolean;
         /**
@@ -801,6 +816,10 @@ export namespace Components {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem": NumberingSystem;
+        /**
+          * When true, hides the saved colors section
+         */
+        "savedDisabled": boolean;
         /**
           * Specifies the size of the component.
          */
@@ -826,10 +845,19 @@ export namespace Components {
           * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.  When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
          */
         "allowEmpty": boolean;
+        /**
+          * When true, the component will allow updates to the color's alpha value.
+         */
+        "alphaChannel": boolean;
         /**
           * Specifies accessible label for the input field.
+          * @deprecated use `messages` instead
          */
         "hexLabel": string;
+        /**
+          * Messages are passed by parent component for accessible labels.
+         */
+        "messages": ColorPickerMessages;
         /**
           * Specifies the Unicode numeral system used by the component for localization.
          */
@@ -843,7 +871,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The Hex value.
+          * The hex value.
          */
         "value": string;
     }
@@ -856,7 +884,7 @@ export namespace Components {
           * The color value.
           * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
          */
-        "color": string;
+        "color": string | null;
         /**
           * Specifies the size of the component.
          */
@@ -5831,6 +5859,14 @@ declare namespace LocalJSX {
           * 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`.
          */
         "allowEmpty"?: boolean;
+        /**
+          * When true, the component will allow updates to the color's alpha value.
+         */
+        "alphaChannel"?: boolean;
+        /**
+          * When true, hides the RGB/HSV channel inputs
+         */
+        "channelsDisabled"?: boolean;
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
@@ -5840,16 +5876,23 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "format"?: Format;
+        /**
+          * When true, hides the hex input
+         */
+        "hexDisabled"?: boolean;
         /**
           * When `true`, hides the RGB/HSV channel inputs.
+          * @deprecated use `channelsDisabled` instead
          */
         "hideChannels"?: boolean;
         /**
-          * When `true`, hides the Hex input.
+          * When `true`, hides the hex input.
+          * @deprecated use `hexDisabled` instead
          */
         "hideHex"?: boolean;
         /**
           * When `true`, hides the saved colors section.
+          * @deprecated use `savedDisabled` instead
          */
         "hideSaved"?: boolean;
         /**
@@ -5868,6 +5911,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "onCalciteColorPickerInput"?: (event: CalciteColorPickerCustomEvent<void>) => void;
+        /**
+          * When true, hides the saved colors section
+         */
+        "savedDisabled"?: boolean;
         /**
           * Specifies the size of the component.
          */
@@ -5889,8 +5936,13 @@ declare namespace LocalJSX {
           * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.  When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
          */
         "allowEmpty"?: boolean;
+        /**
+          * When true, the component will allow updates to the color's alpha value.
+         */
+        "alphaChannel"?: boolean;
         /**
           * Specifies accessible label for the input field.
+          * @deprecated use `messages` instead
          */
         "hexLabel"?: string;
         /**
@@ -5906,7 +5958,7 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * The Hex value.
+          * The hex value.
          */
         "value"?: string;
     }
@@ -5919,7 +5971,7 @@ declare namespace LocalJSX {
           * The color value.
           * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
          */
-        "color"?: string;
+        "color"?: string | null;
         /**
           * Specifies the size of the component.
          */
@@ -7365,6 +7417,10 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Emits when any of the list item selections have changed.
+         */
+        "onCalciteListChange"?: (event: CalciteListCustomEvent<void>) => void;
         /**
           * Emits when the component's filter has changed.
          */

package/dist/types/preact.d.ts

@@ -209,7 +209,8 @@ declare module "preact/src/jsx" {
 
       "calcite-link": JSX.CalciteLink & JSXInternal.HTMLAttributes<HTMLCalciteLinkElement>
 
-      "calcite-list": Omit<JSX.CalciteList, "onCalciteListFilter"> & JSXInternal.HTMLAttributes<HTMLCalciteListElement> & {
+      "calcite-list": Omit<JSX.CalciteList, "onCalciteListChange" | "onCalciteListFilter"> & JSXInternal.HTMLAttributes<HTMLCalciteListElement> & {
+        "oncalciteListChange"?: (event: CustomEvent<any>) => void;
         "oncalciteListFilter"?: (event: CustomEvent<any>) => void;
       }