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

package/dist/types/components/calcite-input-date-picker/calcite-input-date-picker.d.ts

@@ -1,22 +1,34 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/CalciteHeading";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
 import { OverlayPositioning } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { DateRangeChange } from "../calcite-date-picker/interfaces";
-export declare class CalciteInputDatePicker implements LabelableComponent {
+export declare class CalciteInputDatePicker implements LabelableComponent, FormComponent {
   el: HTMLCalciteInputDatePickerElement;
+  /**
+   * When false, the component won't be interactive.
+   */
+  disabled: boolean;
   /** Selected date */
-  value?: string;
+  value: string | string[];
+  valueHandler(value: string | string[]): void;
   /**
    * Number at which section headings should start for this component.
    */
   headingLevel: HeadingLevel;
   /** Selected date as full date object*/
-  valueAsDate?: Date;
-  /** Selected start date as full date object*/
+  valueAsDate?: Date | Date[];
+  /**
+   * Selected start date as full date object
+   * @deprecated use valueAsDate instead
+   */
   startAsDate?: Date;
-  /** Selected end date as full date object*/
+  /**
+   * Selected end date as full date object
+   * @deprecated use valueAsDate instead
+   */
   endAsDate?: Date;
   /** Earliest allowed date as full date object */
   minAsDate?: Date;
@@ -29,6 +41,10 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   /** Expand or collapse when calendar does not have input */
   active: boolean;
   activeHandler(): void;
+  /**
+   * The picker's name. Gets submitted with the form.
+   */
+  name: string;
   /** Localized string for "previous month" (used for aria label)
    * @default "Previous month"
    */
@@ -43,9 +59,21 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   scale: "s" | "m" | "l";
   /** Range mode activation */
   range: boolean;
-  /** Selected start date */
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /**
+   * Selected start date
+   * @deprecated use value instead
+   */
   start?: string;
-  /** Selected end date */
+  /**
+   * Selected end date
+   * @deprecated use value instead
+   */
   end?: string;
   /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;
@@ -80,6 +108,8 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   disconnectedCallback(): void;
   render(): VNode;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputDatePicker["value"];
   focusedInput: "start" | "end";
   private localeData;
   private startInput;
@@ -91,7 +121,7 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   private endWrapper;
   private activeTransitionProp;
   setReferenceEl(): void;
-  onLabelClick: () => void;
+  onLabelClick(): void;
   transitionEnd: (event: TransitionEvent) => void;
   setStartInput: (el: HTMLCalciteInputElement) => void;
   setEndInput: (el: HTMLCalciteInputElement) => void;
@@ -107,7 +137,6 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   getModifiers(): Partial<StrictModifiers>[];
   createPopper(): void;
   destroyPopper(): void;
-  valueWatcher(value: string): void;
   startWatcher(start: string): void;
   endWatcher(end: string): void;
   private loadLocaleData;

package/dist/types/components/calcite-input-time-picker/calcite-input-time-picker.d.ts

@@ -2,7 +2,8 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HourDisplayFormat } from "../../utils/time";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteInputTimePicker implements LabelableComponent {
+import { FormComponent } from "../../utils/form";
+export declare class CalciteInputTimePicker implements LabelableComponent, FormComponent {
   el: HTMLCalciteInputTimePickerElement;
   /** The active state of the time input */
   active: boolean;
@@ -35,15 +36,23 @@ export declare class CalciteInputTimePicker implements LabelableComponent {
   /** aria-label for the second up button */
   intlSecondUp?: string;
   /** The name of the time input */
-  name?: string;
+  name: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /** The scale (size) of the time input */
   scale: Scale;
-  /** number that specifies the granularity that the value must adhere to */
+  /** number (seconds) that specifies the granularity that the value must adhere to */
   step: number;
-  /** The selected time */
+  /** The selected time (always 24-hour format)*/
   value: string;
   valueWatcher(newValue: string): void;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputTimePicker["value"];
   private calciteInputEl;
   /** whether the value of the input was changed as a result of user typing or not */
   private internalValueChange;
@@ -62,7 +71,7 @@ export declare class CalciteInputTimePicker implements LabelableComponent {
   timePickerFocusHandler(event: CustomEvent): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  onLabelClick: () => void;
+  onLabelClick(): void;
   private setCalciteInputEl;
   private setInputValue;
   private setValue;

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

@@ -10,6 +10,7 @@ export declare class CalciteLink {
   disabled: boolean;
   /** optionally pass a href - used to determine if the component should render as a link or an anchor */
   href?: string;
+  hrefHandler(href: string): void;
   /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
   iconEnd?: string;
   /** flip the icon(s) in rtl */
@@ -27,6 +28,6 @@ export declare class CalciteLink {
   /** the rendered child element */
   private childEl;
   /** the node type of the rendered child element */
-  private childElType;
+  childElType: "a" | "span";
   private storeTagRef;
 }

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

@@ -9,5 +9,8 @@ export declare class CalciteList {
    * Number at which section headings should start for this component.
    */
   headingLevel: HeadingLevel;
+  el: HTMLCalciteListElement;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
   render(): VNode;
 }

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

@@ -24,6 +24,9 @@ export declare class CalciteListItem {
    */
   label: string;
   el: HTMLCalciteListItemElement;
+  focusEl: HTMLButtonElement;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
   renderActionsStart(): VNode;
   renderActionsEnd(): VNode;
   renderContentStart(): VNode;

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

@@ -55,9 +55,9 @@ export declare class CalciteModal {
   titleId: string;
   private activeTransitionProp;
   handleEscape(e: KeyboardEvent): void;
-  /** Fired when the modal begins the open animation */
+  /** Fired when the modal finishes the open animation */
   calciteModalOpen: EventEmitter;
-  /** Fired when the modal begins the close animation */
+  /** Fired when the modal finishes the close animation */
   calciteModalClose: EventEmitter;
   /**
    * Focus first interactive element

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

@@ -8,6 +8,7 @@ export declare const CSS: {
   headerActions: string;
   headerActionsEnd: string;
   headerActionsStart: string;
+  contentWrapper: string;
   contentContainer: string;
   fabContainer: string;
   footer: string;

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;
+  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.
    */
@@ -39,10 +48,10 @@ export declare class CalciteRadioGroup implements LabelableComponent {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;
-  private hiddenInput;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteRadioGroup["value"];
   private hasLoaded;
-  onLabelClick: () => void;
+  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;
   /**
@@ -36,11 +45,13 @@ export declare class CalciteRating implements LabelableComponent {
   blurHandler(): void;
   renderStars(): VNode[];
   render(): any;
-  onLabelClick: () => void;
+  onLabelClick(): void;
   private updateValue;
   /** 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>;
   /**
@@ -44,7 +62,7 @@ export declare class CalciteSelect implements LabelableComponent {
   calciteSelectChange: EventEmitter<void>;
   private handleInternalSelectChange;
   protected handleOptionOrGroupChange(event: CustomEvent): void;
-  onLabelClick: () => void;
+  onLabelClick(): void;
   private updateNativeElement;
   private populateInternalSelect;
   private clearInternalSelect;

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

@@ -1,4 +1,5 @@
 export declare const CSS: {
+  container: string;
   content: string;
   contentHeader: string;
   contentBody: 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;
@@ -96,7 +108,7 @@ export declare class CalciteSlider implements LabelableComponent {
   private minValueDragRange;
   private maxValueDragRange;
   private tickValues;
-  onLabelClick: () => void;
+  onLabelClick(): void;
   private shouldMirror;
   private shouldUseMinValue;
   private generateTickValues;
@@ -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-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>;
-  onLabelClick: () => void;
-  private setupInput;
+  keyDownHandler: (e: KeyboardEvent) => void;
+  onLabelClick(): void;
   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;
 }