@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

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

@@ -1,25 +1,23 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteRadioButton implements LabelableComponent {
+import { CheckableFormCompoment } from "../../utils/form";
+export declare class CalciteRadioButton implements LabelableComponent, CheckableFormCompoment {
   el: HTMLCalciteRadioButtonElement;
   /** The checked state of the radio button. */
   checked: boolean;
   checkedChanged(newChecked: boolean): void;
   /** The disabled state of the radio button. */
   disabled: boolean;
-  disabledChanged(disabled: boolean): void;
   /**
    * The focused state of the radio button.
    * @internal
    */
   focused: boolean;
-  focusedChanged(focused: boolean): void;
   /** The id attribute of the radio button.  When omitted, a globally unique identifier is used. */
   guid: string;
   /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
   hidden: boolean;
-  hiddenChanged(newHidden: boolean): void;
   /**
    * The hovered state of the radio button.
    * @internal
@@ -32,28 +30,30 @@ export declare class CalciteRadioButton implements LabelableComponent {
   label?: string;
   /** The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`. */
   name: string;
-  nameChanged(newName: string): void;
+  nameChanged(): void;
   /** Requires that a value is selected for the radio button group before the parent form will submit. */
   required: boolean;
-  requiredChanged(required: boolean): void;
   /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
   scale: Scale;
   /** The value of the radio button. */
   value: any;
   labelEl: HTMLCalciteLabelElement;
-  private initialChecked;
-  private inputEl;
-  private rootNode;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRadioButton["value"];
+  rootNode: HTMLElement;
+  containerEl: HTMLDivElement;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   selectItem: (items: HTMLCalciteRadioButtonElement[], selectedIndex: number) => void;
-  toggle: () => void;
+  queryButtons: () => HTMLCalciteRadioButtonElement[];
+  isDefaultSelectable: () => boolean;
+  check: () => void;
   private clickHandler;
   onLabelClick(event: CustomEvent): void;
   private checkLastRadioButton;
   /** @internal */
   emitCheckedChange(): Promise<void>;
-  private setInputEl;
+  private setContainerEl;
   private uncheckAllRadioButtonsInGroup;
   private uncheckOtherRadioButtonsInGroup;
   /**
@@ -81,10 +81,9 @@ export declare class CalciteRadioButton implements LabelableComponent {
   calciteInternalRadioButtonFocus: EventEmitter;
   mouseenter(): void;
   mouseleave(): void;
-  private formResetHandler;
-  private hideInputEl;
-  private onInputBlur;
-  private onInputFocus;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  private onContainerBlur;
+  private onContainerFocus;
   connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

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

@@ -1,25 +1,34 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
 import { RadioAppearance } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
-export declare class CalciteRadioGroup implements LabelableComponent {
+export declare class CalciteRadioGroup implements LabelableComponent, FormComponent {
   el: HTMLCalciteRadioGroupElement;
   /** specify the appearance style of the radio group, defaults to solid. */
   appearance: RadioAppearance;
   /** is the radio group disabled  */
   disabled: boolean;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /** specify the layout of the radio group, defaults to horizontal */
   layout: Layout;
   /**
    * The group's name. Gets submitted with the form.
    */
   name: string;
-  protected handleNameChange(value: string): void;
   /** The scale of the radio group */
   scale: Scale;
+  /** The value of the selectedItem */
+  value: string;
+  valueHandler(value: string): void;
   /**
    * The group's selected item.
    */
@@ -27,9 +36,9 @@ export declare class CalciteRadioGroup implements LabelableComponent {
   protected handleSelectedItemChange<T extends HTMLCalciteRadioGroupItemElement>(newItem: T, oldItem: T): void;
   /** specify the width of the group, defaults to auto */
   width: Extract<"auto" | "full", Width>;
+  componentWillLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  componentDidLoad(): void;
   render(): VNode;
   protected handleClick: (event: MouseEvent) => void;
   protected handleSelected(event: Event): void;
@@ -39,10 +48,9 @@ export declare class CalciteRadioGroup implements LabelableComponent {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;
-  private hiddenInput;
-  private hasLoaded;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRadioGroup["value"];
   onLabelClick(): void;
   private getItems;
   private selectItem;
-  private syncWithInputProxy;
 }

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

@@ -1,7 +1,8 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteRating implements LabelableComponent {
+import { FormComponent } from "../../utils/form";
+export declare class CalciteRating implements LabelableComponent, FormComponent {
   el: HTMLCalciteRatingElement;
   /** specify the scale of the component, defaults to m */
   scale: Scale;
@@ -17,6 +18,8 @@ export declare class CalciteRating implements LabelableComponent {
   count?: number;
   /** optionally pass a cumulative average rating to display */
   average?: number;
+  /** The name of the rating */
+  name: string;
   /** Localized string for "Rating" (used for aria label)
    * @default "Rating"
    */
@@ -25,6 +28,12 @@ export declare class CalciteRating implements LabelableComponent {
    * @default "Stars: ${num}"
    */
   intlStars?: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
@@ -41,6 +50,8 @@ export declare class CalciteRating implements LabelableComponent {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRating["value"];
   hoverValue: number;
   focusValue: number;
   hasFocus: boolean;

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Direction } from "../../utils/dom";
 import { Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
 /**
  * @slot - A slot for adding `calcite-option`s.
  */
-export declare class CalciteSelect implements LabelableComponent {
+export declare class CalciteSelect implements LabelableComponent, FormComponent {
   /**
    * When true, it prevents the option from being selected.
    */
@@ -15,27 +16,44 @@ export declare class CalciteSelect implements LabelableComponent {
    *
    */
   label: string;
+  /**
+   * The select's name. Gets submitted with the form.
+   */
+  name: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /**
    * The component scale.
    */
   scale: Scale;
+  /** The value of the selectedOption */
+  value: string;
+  valueHandler(value: string): void;
   /**
    * The currently selected option.
    *
    * @readonly
    */
   selectedOption: HTMLCalciteOptionElement;
+  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void;
   /**
    * The component width.
    */
   width: Width;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteSelect["value"];
   el: HTMLCalciteSelectElement;
   private componentToNativeEl;
   private mutationObserver;
   private selectEl;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidLoad(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /**

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

@@ -26,11 +26,42 @@ export declare class CalciteShellPanel {
    * Arranges the component depending on the elements 'dir' property.
    */
   position: Position;
+  /**
+   * Accessible label for resize separator.
+   * @default "Resize"
+   */
+  intlResize: string;
+  /**
+   * This property makes the content area resizable if the calcite-shell-panel is not 'detached'.
+   */
+  resizable: boolean;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
   el: HTMLCalciteShellPanelElement;
+  contentWidth: number;
+  initialContentWidth: number;
+  initialClientX: number;
+  contentEl: HTMLDivElement;
+  separatorEl: HTMLDivElement;
+  contentWidthMax: number;
+  contentWidthMin: number;
+  step: number;
+  stepMultiplier: number;
   /**
    * Emitted when collapse has been toggled.
    */
   calciteShellPanelToggle: EventEmitter;
   renderHeader(): VNode;
   render(): VNode;
+  setContentWidth(width: number): void;
+  updateAriaValues(): void;
+  storeContentEl: (contentEl: HTMLDivElement) => void;
+  getKeyAdjustedWidth: (event: KeyboardEvent) => number | null;
+  separatorKeyDown: (event: KeyboardEvent) => void;
+  separatorPointerMove: (event: PointerEvent) => void;
+  separatorPointerUp: (event: PointerEvent) => void;
+  setInitialContentWidth: () => void;
+  separatorPointerDown: (event: PointerEvent) => void;
+  connectSeparator: (separatorEl: HTMLDivElement) => void;
+  disconnectSeparator: () => void;
 }

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

@@ -1,10 +1,15 @@
 export declare const CSS: {
+  container: string;
   content: string;
   contentHeader: string;
   contentBody: string;
   contentDetached: string;
+  separator: string;
 };
 export declare const SLOTS: {
   actionBar: string;
   header: string;
 };
+export declare const TEXT: {
+  resize: string;
+};

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

@@ -1,13 +1,17 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ColorStop, DataSeries } from "../calcite-graph/interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteSlider implements LabelableComponent {
+import { FormComponent } from "../../utils/form";
+export declare class CalciteSlider implements LabelableComponent, FormComponent {
   el: HTMLCalciteSliderElement;
   /** Disable and gray out the slider */
   disabled: boolean;
   /** Indicates if a histogram is present */
   hasHistogram: boolean;
-  /** Display a histogram above the slider */
+  /**
+   * List of x,y coordinates within the slider's min and max, displays above the slider track.
+   * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-graph/interfaces.ts#L5)
+   */
   histogram?: DataSeries;
   histogramWatcher(newHistogram: DataSeries): void;
   /**
@@ -36,10 +40,16 @@ export declare class CalciteSlider implements LabelableComponent {
    * Note that this value will be ignored if the slider has an associated histogram.
    */
   mirrored: boolean;
+  /** The name of the slider */
+  name: string;
   /** Interval to move on page up/page down keys */
   pageStep?: number;
   /** Use finer point for handles */
   precise: boolean;
+  /**
+   * When true, makes the component required for form-submission.
+   */
+  required: boolean;
   /** When true, enables snap selection along the step interval */
   snap: boolean;
   /** Interval to move on up/down keys */
@@ -56,7 +66,7 @@ export declare class CalciteSlider implements LabelableComponent {
   private renderGraph;
   private renderTickLabel;
   keyDownHandler(event: KeyboardEvent): void;
-  clickHandler(): void;
+  clickHandler(event: PointerEvent): void;
   pointerDownHandler(event: PointerEvent): void;
   handleTouchStart(event: TouchEvent): void;
   /**
@@ -83,6 +93,8 @@ export declare class CalciteSlider implements LabelableComponent {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteSlider["value"];
   private guid;
   private isRange;
   private dragProp;
@@ -133,6 +145,8 @@ export declare class CalciteSlider implements LabelableComponent {
    * @internal
    */
   private getClosestStep;
+  private getClosestHandle;
+  private getDistanceX;
   private getFontSizeForElement;
   /**
    * Get position of value along range as fractional value

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ButtonAppearance, ButtonColor, DropdownIconType } from "../calcite-button/interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
+import { OverlayPositioning } from "../../utils/popper";
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
  */
@@ -24,6 +25,8 @@ export declare class CalciteSplitButton {
   /** optionally add a calcite-loader component to the control,
    disabling interaction. with the primary button */
   loading: boolean;
+  /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
+  overlayPositioning: OverlayPositioning;
   /** optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names  */
   primaryIconEnd?: string;
   /** flip the primary icon(s) in rtl */

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

@@ -1,7 +1,8 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteSwitch implements LabelableComponent {
+import { CheckableFormCompoment } from "../../utils/form";
+export declare class CalciteSwitch implements LabelableComponent, CheckableFormCompoment {
   el: HTMLCalciteSwitchElement;
   /** True if the switch is disabled */
   disabled: boolean;
@@ -9,8 +10,7 @@ export declare class CalciteSwitch implements LabelableComponent {
   /** Applies to the aria-label attribute on the switch */
   label?: string;
   /** The name of the switch input */
-  name?: string;
-  nameChanged(newName: string): void;
+  name: string;
   /** The scale of the switch */
   scale: Scale;
   /** True if the switch is initially on
@@ -20,24 +20,25 @@ export declare class CalciteSwitch implements LabelableComponent {
   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;
+  value: any;
   labelEl: HTMLCalciteLabelElement;
-  private inputEl;
-  guid: string;
+  switchEl: HTMLDivElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteSwitch["checked"];
+  defaultChecked: boolean;
   tabindex: number;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  keyDownHandler: (e: KeyboardEvent) => void;
   onLabelClick(): void;
-  private setupInput;
   private toggle;
   private clickHandler;
+  private setSwitchEl;
   /**
    * Fires when the checked value has changed.
    */
   calciteSwitchChange: EventEmitter;
-  keyDownHandler(e: KeyboardEvent): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;

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

@@ -20,7 +20,7 @@ export declare class CalciteTileSelect {
   /** The icon that appears at the top of the tile. */
   icon?: string;
   /** 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;
+  name: any;
   nameChanged(newName: string): void;
   /** Display an interactive radio or checkbox. */
   inputEnabled: boolean;
@@ -43,10 +43,10 @@ export declare class CalciteTileSelect {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   checkboxChangeHandler(event: CustomEvent): void;
-  checkboxFocusHandler(event: CustomEvent): void;
+  checkboxFocusBlurHandler(event: CustomEvent): void;
   radioButtonChangeHandler(event: CustomEvent): void;
   radioButtonCheckedChangeHandler(event: CustomEvent): void;
-  radioButtonFocusHandler(event: CustomEvent): void;
+  radioButtonFocusBlurHandler(event: CustomEvent): void;
   click(event: MouseEvent): void;
   mouseenter(): void;
   mouseleave(): void;

package/dist/types/components/calcite-tree-item/calcite-tree-item.d.ts

@@ -50,5 +50,7 @@ export declare class CalciteTreeItem {
   calciteTreeItemSelect: EventEmitter<TreeItemSelectDetail>;
   childrenSlotWrapper: HTMLElement;
   defaultSlotWrapper: HTMLElement;
+  private parentTreeItem?;
+  private updateParentIsExpanded;
   private updateAncestorTree;
 }