@esri/calcite-components 1.4.0-next.2 → 1.4.0-next.21

package/dist/extras/vscode-data.json

@@ -686,7 +686,11 @@
       "attributes": [
         {
           "name": "full-name",
-          "description": "Specifies the full name of the user."
+          "description": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component."
+        },
+        {
+          "name": "label",
+          "description": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label."
         },
         {
           "name": "scale",
@@ -1114,7 +1118,7 @@
         },
         {
           "name": "disabled",
-          "description": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "description": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         {
           "name": "icon",
@@ -1145,7 +1149,7 @@
         },
         {
           "name": "scale",
-          "description": "Specifies the size of the component.",
+          "description": "Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value.",
           "values": [
             {
               "name": "l"
@@ -1160,7 +1164,7 @@
         },
         {
           "name": "selected",
-          "description": "When true, the component is selected."
+          "description": "When `true`, the component is selected."
         },
         {
           "name": "value",
@@ -1177,7 +1181,7 @@
       "attributes": [
         {
           "name": "disabled",
-          "description": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "description": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         {
           "name": "label",
@@ -1185,7 +1189,7 @@
         },
         {
           "name": "scale",
-          "description": "Specifies the size of the component.",
+          "description": "Specifies the size of the component. Child `calcite-chip`s inherit the component's value.",
           "values": [
             {
               "name": "l"
@@ -1227,7 +1231,15 @@
       "attributes": [
         {
           "name": "allow-empty",
-          "description": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `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`."
+          "description": "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`."
+        },
+        {
+          "name": "alpha-channel",
+          "description": "When true, the component will allow updates to the color's alpha value."
+        },
+        {
+          "name": "channels-disabled",
+          "description": "When true, hides the RGB/HSV channel inputs"
         },
         {
           "name": "disabled",
@@ -1278,13 +1290,17 @@
             }
           ]
         },
+        {
+          "name": "hex-disabled",
+          "description": "When true, hides the hex input"
+        },
         {
           "name": "hide-channels",
           "description": "When `true`, hides the RGB/HSV channel inputs."
         },
         {
           "name": "hide-hex",
-          "description": "When `true`, hides the Hex input."
+          "description": "When `true`, hides the hex input."
         },
         {
           "name": "hide-saved",
@@ -1362,6 +1378,10 @@
             }
           ]
         },
+        {
+          "name": "saved-disabled",
+          "description": "When true, hides the saved colors section"
+        },
         {
           "name": "scale",
           "description": "Specifies the size of the component.",
@@ -1398,6 +1418,10 @@
           "name": "allow-empty",
           "description": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `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`."
         },
+        {
+          "name": "alpha-channel",
+          "description": "When true, the component will allow updates to the color's alpha value."
+        },
         {
           "name": "hex-label",
           "description": "Specifies accessible label for the input field."
@@ -1491,7 +1515,7 @@
         },
         {
           "name": "value",
-          "description": "The Hex value."
+          "description": "The hex value."
         }
       ]
     },
@@ -3542,7 +3566,7 @@
         },
         {
           "name": "value",
-          "description": "The component's value in UTC (always 24-hour format)."
+          "description": "The time value in ISO (24-hour) format."
         }
       ]
     },
@@ -3829,6 +3853,95 @@
         }
       ]
     },
+    {
+      "name": "calcite-menu",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Accessible name for the component."
+        },
+        {
+          "name": "layout",
+          "description": "Specifies the layout of the component.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "calcite-menu-item",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "When `true`, the component is highlighted."
+        },
+        {
+          "name": "breadcrumb",
+          "description": "When `true`, the component displays a breadcrumb trail for use as a navigational aid."
+        },
+        {
+          "name": "href",
+          "description": "Specifies the URL destination of the component, which can be set as an absolute or relative path."
+        },
+        {
+          "name": "icon-end",
+          "description": "Specifies an icon to display at the end of the component."
+        },
+        {
+          "name": "icon-flip-rtl",
+          "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "values": [
+            {
+              "name": "both"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "icon-start",
+          "description": "Specifies an icon to display at the start of the component."
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the component."
+        },
+        {
+          "name": "open",
+          "description": "When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu."
+        },
+        {
+          "name": "rel",
+          "description": "Defines the relationship between the `href` value and the current document."
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to open the linked document defined in the `href` property."
+        },
+        {
+          "name": "text",
+          "description": "Specifies the text to display."
+        }
+      ]
+    },
     {
       "name": "calcite-modal",
       "description": {
@@ -4905,7 +5018,37 @@
         },
         {
           "name": "detached-height-scale",
-          "description": "When `detached`, specifies the maximum height of the component.",
+          "description": "When `displayMode` is `float`, specifies the maximum height of the component.",
+          "values": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        },
+        {
+          "name": "display-mode",
+          "description": "Specifies the display mode - `\"dock\"` (full height, displays adjacent to center content), `\"float\"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),\nor `\"overlay\"` (full height, displays on top of center content).",
+          "values": [
+            {
+              "name": "dock"
+            },
+            {
+              "name": "float"
+            },
+            {
+              "name": "overlay"
+            }
+          ]
+        },
+        {
+          "name": "height-scale",
+          "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.",
           "values": [
             {
               "name": "l"
@@ -4944,11 +5087,11 @@
         },
         {
           "name": "resizable",
-          "description": "When `true` and not `detached`, the component's content area is resizable."
+          "description": "When `true` and `displayMode` is not `float`, the component's content area is resizable."
         },
         {
           "name": "width-scale",
-          "description": "Specifies the width of the component's content area.",
+          "description": "When `layout` is `vertical`, specifies the width of the component.",
           "values": [
             {
               "name": "l"

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

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

@@ -5,12 +5,14 @@ export declare class Avatar {
   scale: Scale;
   /** Specifies the `src` to an image (remember to add a token if the user is private). */
   thumbnail: string;
-  /** Specifies the full name of the user. */
+  /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
   fullName: string;
   /** Specifies the username of the user. */
   username: string;
   /** Specifies the unique id of the user. */
   userId: string;
+  /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.*/
+  label: string;
   render(): any;
   thumbnailFailedToLoad: boolean;
   private determineContent;

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

@@ -12,7 +12,7 @@ import { ChipMessages } from "./assets/chip/t9n";
  */
 export declare class Chip implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   el: HTMLCalciteChipElement;
-  /** When true, interaction is prevented and the component is displayed with lower opacity. */
+  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /** Specifies the appearance style of the component. */
   appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
@@ -24,7 +24,7 @@ export declare class Chip implements ConditionalSlotComponent, InteractiveCompon
   icon: string;
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   iconFlipRtl: boolean;
-  /** Specifies the size of the component. */
+  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */
   scale: Scale;
   /** Accessible name for the component. */
   label: string;
@@ -39,7 +39,7 @@ export declare class Chip implements ConditionalSlotComponent, InteractiveCompon
    * @internal
    */
   selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
-  /** When true, the component is selected.  */
+  /** When `true`, the component is selected.  */
   selected: boolean;
   /**
    * Use this property to override individual strings used by the component.

package/dist/types/components/chip-group/chip-group.d.ts

@@ -6,11 +6,11 @@ import { Scale, SelectionMode } from "../interfaces";
  */
 export declare class ChipGroup implements InteractiveComponent {
   el: HTMLCalciteChipGroupElement;
-  /** When true, interaction is prevented and the component is displayed with lower opacity. */
+  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /** Accessible name for the component. */
   label: string;
-  /** Specifies the size of the component. */
+  /** Specifies the size of the component. Child `calcite-chip`s inherit the component's value. */
   scale: Scale;
   /** Specifies the selection mode of the component. */
   selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;

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";
@@ -11,11 +11,16 @@ import { ColorPickerMessages } from "./assets/color-picker/t9n";
 export declare class ColorPicker implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   el: HTMLCalciteColorPickerElement;
   /**
-   * 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`.
+   * 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.
    *
@@ -35,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;
@@ -65,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;
@@ -105,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.
    */
@@ -127,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>;
@@ -148,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 {};