@esri/calcite-components 1.0.0-beta.66 → 1.0.0-beta.67

package/dist/types/components/calcite-action/calcite-action.d.ts

@@ -11,7 +11,7 @@ export declare class CalciteAction {
    */
   active: boolean;
   /**
-   * Indicates the alignment when text-enabled is false.
+   * Optionally specify the horizontal alignment of button elements with text content.
    */
   alignment?: Alignment;
   /**

package/dist/types/components/calcite-action-bar/utils.d.ts

@@ -1,3 +1,4 @@
+export declare const overflowActionsDebounceInMs = 150;
 export declare const getOverflowCount: ({ actionCount, actionHeight, height, groupCount }: {
   actionCount: number;
   actionHeight: number;

package/dist/types/components/calcite-button/calcite-button.d.ts

@@ -2,6 +2,9 @@ import { VNode } from "../../stencil-public-runtime";
 import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
+/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
+/** @slot - A slot for adding text. */
 export declare class CalciteButton implements LabelableComponent {
   el: HTMLCalciteButtonElement;
   /** optionally specify alignment of button elements. */

package/dist/types/components/calcite-checkbox/calcite-checkbox.d.ts

@@ -46,14 +46,20 @@ export declare class CalciteCheckbox implements LabelableComponent {
   private getPath;
   private toggle;
   private clickHandler;
+  /**
+   * Emitted when the checkbox is blurred
+   *
+   * @internal
+   */
+  calciteInternalCheckboxBlur: EventEmitter;
   /** Emitted when the checkbox checked status changes */
   calciteCheckboxChange: EventEmitter;
   /**
-   * Emitted when the checkbox focused state changes
+   * Emitted when the checkbox is focused
    *
    * @internal
    */
-  calciteCheckboxFocusedChange: EventEmitter;
+  calciteInternalCheckboxFocus: EventEmitter;
   mouseenter(): void;
   mouseleave(): void;
   private formResetHandler;

package/dist/types/components/calcite-label/calcite-label.d.ts

@@ -11,7 +11,7 @@ export declare class CalciteLabel {
   status: Status;
   /** The id of the input associated with the label */
   for: string;
-  /** specify the scale of the input, defaults to m */
+  /** specify the scale of the label, defaults to m */
   scale: Scale;
   /** is the wrapped element positioned inline with the label slotted text */
   layout: "inline" | "inline-space-between" | "default";
@@ -22,7 +22,9 @@ export declare class CalciteLabel {
   /**
    * @internal
    */
-  calciteInternalLabelClick: EventEmitter<void>;
-  labelClickHandler: () => void;
+  calciteInternalLabelClick: EventEmitter<{
+    sourceEvent: MouseEvent;
+  }>;
+  labelClickHandler: (event: MouseEvent) => void;
   render(): VNode;
 }

package/dist/types/components/calcite-radio-button/calcite-radio-button.d.ts

@@ -56,6 +56,11 @@ export declare class CalciteRadioButton implements LabelableComponent {
   private setInputEl;
   private uncheckAllRadioButtonsInGroup;
   private uncheckOtherRadioButtonsInGroup;
+  /**
+   * Fires when the radio button is blurred.
+   * @internal
+   */
+  calciteInternalRadioButtonBlur: EventEmitter;
   /**
    * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.
    * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event
@@ -68,12 +73,12 @@ export declare class CalciteRadioButton implements LabelableComponent {
    * Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms.
    * @internal
    */
-  calciteRadioButtonCheckedChange: EventEmitter;
+  calciteInternalRadioButtonCheckedChange: EventEmitter;
   /**
-   * Fires when the radio button is either focused or blurred.
+   * Fires when the radio button is focused.
    * @internal
    */
-  calciteRadioButtonFocusedChange: EventEmitter;
+  calciteInternalRadioButtonFocus: EventEmitter;
   mouseenter(): void;
   mouseleave(): void;
   private formResetHandler;

package/dist/types/components/calcite-shell/calcite-shell.d.ts

@@ -5,7 +5,7 @@ import { VNode } from "../../stencil-public-runtime";
  * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.
  * @slot primary-panel - A slot for adding the leading `calcite-shell-panel`.
  * @slot contextual-panel - A slot for adding the trailing `calcite-shell-panel`.
- * @slot bottom-panel - A slot for adding a bottom floating panel such as a chart or `calcite-tip-manager`.
+ * @slot center-row - A slot for adding custom content in the center row.
  */
 export declare class CalciteShell {
   /**

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

@@ -65,13 +65,19 @@ export declare class CalciteSlider implements LabelableComponent {
    * expensive operations consider using a debounce or throttle to avoid
    * locking up the main thread.
    */
+  calciteSliderInput: EventEmitter;
+  /**
+   * Fires on when the thumb is released on slider
+   * If you need to constantly listen to the drag event,
+   * please use calciteSliderInput instead
+   */
   calciteSliderChange: EventEmitter;
   /**
    * Fires on all updates to the slider.
    * :warning: Will be fired frequently during drag. If you are performing any
    * expensive operations consider using a debounce or throttle to avoid
    * locking up the main thread.
-   * @deprecated use calciteSliderChange instead
+   * @deprecated use calciteSliderInput instead
    */
   calciteSliderUpdate: EventEmitter;
   /** Sets focus on the component. */
@@ -81,8 +87,10 @@ export declare class CalciteSlider implements LabelableComponent {
   private isRange;
   private dragProp;
   private lastDragProp;
+  private lastDragPropValue;
   private minHandle;
   private maxHandle;
+  private trackEl;
   private activeProp;
   private minMaxValueRange;
   private minValueDragRange;
@@ -95,8 +103,21 @@ export declare class CalciteSlider implements LabelableComponent {
   private dragStart;
   private focusActiveHandle;
   private dragUpdate;
+  private emitInput;
   private emitChange;
   private dragEnd;
+  /**
+   * Set the prop value if changed at the component level
+   * @param valueProp
+   * @param value
+   */
+  private setValue;
+  /**
+   * Set the reference of the track Element
+   * @internal
+   * @param node
+   */
+  private storeTrackRef;
   /**
    * If number is outside range, constrain to min or max
    * @internal

package/dist/types/components/calcite-switch/calcite-switch.d.ts

@@ -13,9 +13,14 @@ export declare class CalciteSwitch implements LabelableComponent {
   nameChanged(newName: string): void;
   /** The scale of the switch */
   scale: Scale;
-  /** True if the switch is initially on */
+  /** True if the switch is initially on
+   * @deprecated use 'checked' instead.
+   */
   switched: boolean;
-  switchedWatcher(newSwitched: boolean): void;
+  switchedWatcher(switched: boolean): void;
+  /** True if the switch is initially on */
+  checked: boolean;
+  checkedWatcher(checked: boolean): void;
   /** The value of the switch input */
   value?: any;
   labelEl: HTMLCalciteLabelElement;
@@ -29,7 +34,7 @@ export declare class CalciteSwitch implements LabelableComponent {
   private toggle;
   private clickHandler;
   /**
-   * Fires when the switched value has changed.
+   * Fires when the checked value has changed.
    */
   calciteSwitchChange: EventEmitter;
   keyDownHandler(e: KeyboardEvent): void;

package/dist/types/components/calcite-tile-select/calcite-tile-select.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from "../../stencil-public-runtime";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Alignment, Width } from "../interfaces";
 import { TileSelectType } from "./interfaces";
 /**
@@ -36,12 +36,17 @@ export declare class CalciteTileSelect {
   guid: string;
   /** The focused state of the tile-select. */
   focused: boolean;
+  /**
+   * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+   */
+  calciteTileSelectChange: EventEmitter;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  calciteCheckboxChangeEvent(event: CustomEvent): void;
-  calciteCheckboxFocusedChangeEvent(event: CustomEvent): void;
-  calciteRadioButtonCheckedChangeEvent(event: CustomEvent): void;
-  calciteRadioButtonFocusedChangeEvent(event: CustomEvent): void;
+  checkboxChangeHandler(event: CustomEvent): void;
+  checkboxFocusHandler(event: CustomEvent): void;
+  radioButtonChangeHandler(event: CustomEvent): void;
+  radioButtonCheckedChangeHandler(event: CustomEvent): void;
+  radioButtonFocusHandler(event: CustomEvent): void;
   click(event: MouseEvent): void;
   mouseenter(): void;
   mouseleave(): void;

package/dist/types/components/calcite-value-list/calcite-value-list.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "../calcite-pick-list/shared-list-logic";
 /**
- * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
  */
 export declare class CalciteValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> {

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

@@ -7,4 +7,5 @@ export declare type Position = "start" | "end";
 export declare type Scale = "s" | "m" | "l";
 export declare type Status = "invalid" | "valid" | "idle";
 export declare type ThemeClass = "calcite-theme-light" | "calcite-theme-dark" | "calcite-theme-auto";
+export declare type ThemeName = "light" | "dark" | "auto";
 export declare type Width = "auto" | "half" | "full";

package/dist/types/components.d.ts

@@ -83,7 +83,7 @@ export namespace Components {
          */
         "active": boolean;
         /**
-          * Indicates the alignment when text-enabled is false.
+          * Optionally specify the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
@@ -1734,7 +1734,7 @@ export namespace Components {
          */
         "layout": "inline" | "inline-space-between" | "default";
         /**
-          * specify the scale of the input, defaults to m
+          * specify the scale of the label, defaults to m
          */
         "scale": Scale;
         /**
@@ -2811,6 +2811,10 @@ export namespace Components {
         "scale": Scale;
     }
     interface CalciteSwitch {
+        /**
+          * True if the switch is initially on
+         */
+        "checked": boolean;
         /**
           * True if the switch is disabled
          */
@@ -2833,6 +2837,7 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * True if the switch is initially on
+          * @deprecated use 'checked' instead.
          */
         "switched": boolean;
         /**
@@ -4051,7 +4056,7 @@ declare namespace LocalJSX {
          */
         "active"?: boolean;
         /**
-          * Indicates the alignment when text-enabled is false.
+          * Optionally specify the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
@@ -5727,7 +5732,7 @@ declare namespace LocalJSX {
          */
         "layout"?: "inline" | "inline-space-between" | "default";
         /**
-          * specify the scale of the input, defaults to m
+          * specify the scale of the label, defaults to m
          */
         "scale"?: Scale;
         /**
@@ -6610,12 +6615,16 @@ declare namespace LocalJSX {
          */
         "mirrored"?: boolean;
         /**
-          * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
+          * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead
          */
         "onCalciteSliderChange"?: (event: CustomEvent<any>) => void;
         /**
           * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
-          * @deprecated use calciteSliderChange instead
+         */
+        "onCalciteSliderInput"?: (event: CustomEvent<any>) => void;
+        /**
+          * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
+          * @deprecated use calciteSliderInput instead
          */
         "onCalciteSliderUpdate"?: (event: CustomEvent<any>) => void;
         /**
@@ -6780,6 +6789,10 @@ declare namespace LocalJSX {
         "itemTitle"?: string;
     }
     interface CalciteSwitch {
+        /**
+          * True if the switch is initially on
+         */
+        "checked"?: boolean;
         /**
           * True if the switch is disabled
          */
@@ -6793,7 +6806,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Fires when the switched value has changed.
+          * Fires when the checked value has changed.
          */
         "onCalciteSwitchChange"?: (event: CustomEvent<any>) => void;
         /**
@@ -6802,6 +6815,7 @@ declare namespace LocalJSX {
         "scale"?: Scale;
         /**
           * True if the switch is initially on
+          * @deprecated use 'checked' instead.
          */
         "switched"?: boolean;
         /**
@@ -6954,6 +6968,10 @@ declare namespace LocalJSX {
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
         "name"?: string;
+        /**
+          * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+         */
+        "onCalciteTileSelectChange"?: (event: CustomEvent<any>) => void;
         /**
           * The selection mode of the tile select: radio (single) or checkbox (multiple).
          */

package/dist/types/preact.d.ts

@@ -58,9 +58,10 @@ declare module "preact/src/jsx" {
         "oncalciteCardSelect"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-checkbox": Omit<JSX.CalciteCheckbox, "onCalciteCheckboxChange" | "onCalciteCheckboxFocusedChange"> & JSXInternal.HTMLAttributes<HTMLCalciteCheckboxElement> & {
+      "calcite-checkbox": Omit<JSX.CalciteCheckbox, "onCalciteInternalCheckboxBlur" | "onCalciteCheckboxChange" | "onCalciteInternalCheckboxFocus"> & JSXInternal.HTMLAttributes<HTMLCalciteCheckboxElement> & {
+        "oncalciteInternalCheckboxBlur"?: (event: CustomEvent<any>) => void;
         "oncalciteCheckboxChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteCheckboxFocusedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalCheckboxFocus"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-chip": Omit<JSX.CalciteChip, "onCalciteChipDismiss"> & JSXInternal.HTMLAttributes<HTMLCalciteChipElement> & {
@@ -239,10 +240,11 @@ declare module "preact/src/jsx" {
 
       "calcite-radio": JSX.CalciteRadio & JSXInternal.HTMLAttributes<HTMLCalciteRadioElement>
 
-      "calcite-radio-button": Omit<JSX.CalciteRadioButton, "onCalciteRadioButtonChange" | "onCalciteRadioButtonCheckedChange" | "onCalciteRadioButtonFocusedChange"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonElement> & {
+      "calcite-radio-button": Omit<JSX.CalciteRadioButton, "onCalciteInternalRadioButtonBlur" | "onCalciteRadioButtonChange" | "onCalciteInternalRadioButtonCheckedChange" | "onCalciteInternalRadioButtonFocus"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonElement> & {
+        "oncalciteInternalRadioButtonBlur"?: (event: CustomEvent<any>) => void;
         "oncalciteRadioButtonChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteRadioButtonCheckedChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteRadioButtonFocusedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalRadioButtonCheckedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalRadioButtonFocus"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-radio-button-group": Omit<JSX.CalciteRadioButtonGroup, "onCalciteRadioButtonGroupChange"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonGroupElement> & {
@@ -275,7 +277,8 @@ declare module "preact/src/jsx" {
         "oncalciteShellPanelToggle"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-slider": Omit<JSX.CalciteSlider, "onCalciteSliderChange" | "onCalciteSliderUpdate"> & JSXInternal.HTMLAttributes<HTMLCalciteSliderElement> & {
+      "calcite-slider": Omit<JSX.CalciteSlider, "onCalciteSliderInput" | "onCalciteSliderChange" | "onCalciteSliderUpdate"> & JSXInternal.HTMLAttributes<HTMLCalciteSliderElement> & {
+        "oncalciteSliderInput"?: (event: CustomEvent<any>) => void;
         "oncalciteSliderChange"?: (event: CustomEvent<any>) => void;
         "oncalciteSliderUpdate"?: (event: CustomEvent<any>) => void;
       }
@@ -322,7 +325,9 @@ declare module "preact/src/jsx" {
 
       "calcite-tile": JSX.CalciteTile & JSXInternal.HTMLAttributes<HTMLCalciteTileElement>
 
-      "calcite-tile-select": JSX.CalciteTileSelect & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectElement>
+      "calcite-tile-select": Omit<JSX.CalciteTileSelect, "onCalciteTileSelectChange"> & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectElement> & {
+        "oncalciteTileSelectChange"?: (event: CustomEvent<any>) => void;
+      }
 
       "calcite-tile-select-group": JSX.CalciteTileSelectGroup & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectGroupElement>
 

package/dist/types/utils/resources.d.ts

@@ -1,3 +1,9 @@
+import { ThemeClass, ThemeName } from "../components/interfaces";
+interface Theme {
+  name: ThemeName;
+  className: ThemeClass;
+}
+export declare const THEMES: Theme[];
 export declare const CSS_UTILITY: {
   autoTheme: string;
   darkTheme: string;
@@ -7,3 +13,4 @@ export declare const CSS_UTILITY: {
 export declare const TEXT: {
   loading: string;
 };
+export {};