@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -0,0 +1,22 @@
+import { VNode } from "../../stencil-public-runtime";
+import { FlowDirection } from "./interfaces";
+/**
+ * @slot - A slot for adding `calcite-panel`s to the flow.
+ */
+export declare class CalciteFlow {
+  /**
+   * Removes the currently active `calcite-panel`.
+   */
+  back(): Promise<HTMLCalcitePanelElement>;
+  el: HTMLCalciteFlowElement;
+  panelCount: number;
+  flowDirection: FlowDirection;
+  panels: HTMLCalcitePanelElement[];
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  handleCalcitePanelBackClick(): void;
+  getFlowDirection: (oldPanelCount: number, newPanelCount: number) => FlowDirection | null;
+  updateFlowProps: () => void;
+  panelItemMutationObserver: MutationObserver;
+  render(): VNode;
+}

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

@@ -0,0 +1,28 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ColorStop, DataSeries } from "./interfaces";
+export declare class CalciteGraph {
+  el: HTMLCalciteGraphElement;
+  /**
+   * Array of tuples describing a single data point ([x, y])
+   * These data points should be sorted by x-axis value
+   */
+  data: DataSeries;
+  /**
+   * Array of values describing a single color stop ([offset, color, opacity])
+   * These color stops should be sorted by offset value
+   */
+  colorStops: ColorStop[];
+  /** Start of highlight color if highlighting range */
+  highlightMin: number;
+  /** End of highlight color if highlighting range */
+  highlightMax: number;
+  /** Lowest point of the range */
+  min: number;
+  /** Highest point of the range */
+  max: number;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  private graphId;
+  private resizeObserver;
+}

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

@@ -0,0 +1,22 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+export declare class CalciteHandle {
+  /**
+   * @internal - stores the activated state of the drag handle.
+   */
+  activated: boolean;
+  /**
+   * Value for the button title attribute
+   */
+  textTitle: string;
+  el: HTMLCalciteHandleElement;
+  handleButton: HTMLElement;
+  /**
+   * Emitted when the the handle is activated and the up or down arrow key is pressed.
+   */
+  calciteHandleNudge: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  handleBlur: () => void;
+  render(): VNode;
+}

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

@@ -0,0 +1,32 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export declare class CalciteIcon {
+  el: HTMLCalciteIconElement;
+  /**
+   * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+   */
+  icon: string;
+  /**
+   * When true, the icon will be flipped when the element direction is 'rtl'.
+   */
+  flipRtl: boolean;
+  /**
+   * Icon scale.
+   */
+  scale: Scale;
+  /**
+   * The icon label.
+   *
+   * It is recommended to set this value if your icon is semantic.
+   */
+  textLabel: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  render(): VNode;
+  private intersectionObserver;
+  private pathData;
+  private visible;
+  private loadIconPathData;
+  private waitUntilVisible;
+}

package/dist/types/components/calcite-inline-editable/calcite-inline-editable.d.ts

@@ -0,0 +1,71 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+/**
+ * @slot - A slot for adding a `calcite-input`.
+ */
+export declare class CalciteInlineEditable implements LabelableComponent {
+  el: HTMLCalciteInlineEditableElement;
+  /** specify whether editing can be enabled */
+  disabled: boolean;
+  disabledWatcher(disabled: boolean): void;
+  /** specify whether the wrapped input element is editable, defaults to false */
+  editingEnabled: boolean;
+  editingEnabledWatcher(newValue: boolean, oldValue: boolean): void;
+  /** specify whether the confirm button should display a loading state, defaults to false */
+  loading: boolean;
+  /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
+  controls: boolean;
+  /** specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+   * @default "Click to edit"
+   */
+  intlEnableEditing: string;
+  /** specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+   * @default "Cancel"
+   */
+  intlCancelEditing: string;
+  /** specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+   * @default "Save"
+   */
+  intlConfirmChanges: string;
+  /** specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale */
+  scale?: Scale;
+  /** when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */
+  afterConfirm?: () => Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  /**
+   * Emitted when the cancel button gets clicked.
+   */
+  calciteInlineEditableEditCancel: EventEmitter<void>;
+  /**
+   * Emitted when the check button gets clicked.
+   */
+  calciteInlineEditableEditConfirm: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  calciteInlineEditableEnableEditingChange: EventEmitter;
+  blurHandler(): void;
+  private inputElement;
+  private valuePriorToEditing;
+  private shouldEmitCancel;
+  private enableEditingButton;
+  private cancelEditingButton;
+  labelEl: HTMLCalciteLabelElement;
+  mutationObserver: MutationObserver;
+  setFocus(): Promise<void>;
+  mutationObserverCallback(): void;
+  onLabelClick(): void;
+  updateSlottedInput(): void;
+  transitionEnd: () => void;
+  private get shouldShowControls();
+  private enableEditing;
+  private disableEditing;
+  private cancelEditing;
+  private escapeKeyHandler;
+  private cancelEditingHandler;
+  private enableEditingHandler;
+  private confirmChangesHandler;
+}

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

@@ -0,0 +1,168 @@
+import { Scale, Status } from "../interfaces";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { InputPlacement } from "./interfaces";
+import { Position } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+declare type NumberNudgeDirection = "up" | "down";
+/**
+ * @slot action - A slot for positioning a button next to an input
+ */
+export declare class CalciteInput implements LabelableComponent, FormComponent {
+  el: HTMLCalciteInputElement;
+  /** specify the alignment of the value of the input */
+  alignment: Position;
+  /** should the input autofocus */
+  autofocus: boolean;
+  /** optionally display a clear button that displays when field has a value
+   * shows by default for search, time, date
+   * will not display for type="textarea" */
+  clearable: boolean;
+  /** is the input disabled  */
+  disabled: boolean;
+  disabledWatcher(): void;
+  /** for number values, displays the locale's group separator */
+  groupSeparator: boolean;
+  /** when true, the component will not be visible */
+  hidden: boolean;
+  /** when used as a boolean set to true, show a default recommended icon for certain
+   * input types (tel, password, email, date, time, search). You can also pass a
+   * calcite-ui-icon name to this prop to display a requested icon for any input type */
+  icon: string | boolean;
+  /**
+   * string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** flip the icon in rtl */
+  iconFlipRtl: boolean;
+  /** Applies to the aria-label attribute on the button or hyperlink */
+  label?: string;
+  /** specify if the input is in loading state */
+  loading: boolean;
+  /** BCP 47 language tag for desired language and country format */
+  locale?: string;
+  /**
+   * Toggles locale formatting for numbers.
+   * @internal
+   */
+  localeFormat: boolean;
+  /** input max */
+  max?: number;
+  /** watcher to update number-to-string for max */
+  maxWatcher(): void;
+  /** input min */
+  min?: number;
+  /** watcher to update number-to-string for min */
+  minWatcher(): void;
+  /**
+   * Maximum length of text input.
+   * @deprecated use maxLength instead
+   */
+  maxlength?: number;
+  /** Maximum length of the input value */
+  maxLength?: number;
+  /** Minimum length of the text input */
+  minLength?: number;
+  /** The name of the input */
+  name: string;
+  /** specify the placement of the number buttons */
+  numberButtonType?: InputPlacement;
+  /** explicitly whitelist placeholder attribute */
+  placeholder: string;
+  /** optionally add prefix  */
+  prefixText?: string;
+  /** When true, a field cannot be modified. */
+  readOnly: boolean;
+  /** is the input required */
+  required: boolean;
+  /** specify the scale of the input, defaults to m */
+  scale: Scale;
+  /** specify the status of the input field, determines message and icons */
+  status: Status;
+  /** input step */
+  step?: number | "any";
+  /** optionally add suffix  **/
+  suffixText?: string;
+  /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+  editingEnabled: boolean;
+  /**
+   * specify the input type
+   *
+   * Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
+   */
+  type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week";
+  /** input value */
+  value: string;
+  valueWatcher(newValue: string): void;
+  updateRequestedIcon(): void;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInput["value"];
+  inlineEditableEl: HTMLCalciteInlineEditableElement;
+  /** keep track of the rendered child type */
+  private childEl?;
+  /** keep track of the rendered child type */
+  private childElType?;
+  /** number text input element for locale */
+  private childNumberEl?;
+  /** whether the value of the input was changed as a result of user typing or not */
+  private internalValueChange;
+  get isClearable(): boolean;
+  get isTextarea(): boolean;
+  private minString?;
+  private maxString?;
+  private preFocusValue;
+  private previousValue;
+  /** the computed icon to render */
+  private requestedIcon?;
+  private nudgeNumberValueIntervalId;
+  mutationObserver: MutationObserver;
+  localizedValue: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  /**
+   * @internal
+   */
+  calciteInputFocus: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteInputBlur: EventEmitter;
+  /**
+   * This event fires each time a new value is typed.
+   */
+  calciteInputInput: EventEmitter;
+  /**
+   * This event fires each time a new value is typed and committed.
+   */
+  calciteInputChange: EventEmitter<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  onLabelClick(): void;
+  incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void;
+  private clearInputValue;
+  private inputBlurHandler;
+  private inputFocusHandler;
+  private inputInputHandler;
+  private inputKeyDownHandler;
+  private inputNumberInputHandler;
+  private inputNumberKeyDownHandler;
+  private nudgeNumberValue;
+  private numberButtonMouseUpAndMouseOutHandler;
+  private numberButtonMouseDownHandler;
+  onFormReset(): void;
+  syncHiddenFormInput(input: HTMLInputElement): void;
+  private setChildElRef;
+  private setChildNumberElRef;
+  private setDisabledAction;
+  private setInputValue;
+  private setPreviousValue;
+  private setValue;
+  private inputKeyUpHandler;
+  private warnAboutInvalidNumberValue;
+  render(): VNode;
+}
+export {};

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

@@ -0,0 +1,179 @@
+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, FormComponent {
+  el: HTMLCalciteInputDatePickerElement;
+  /**
+   * When false, the component won't be interactive.
+   */
+  disabled: boolean;
+  /** Selected date */
+  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 | Date[];
+  /**
+   * Selected start date as full date object
+   * @deprecated use valueAsDate instead
+   */
+  startAsDate?: Date;
+  /**
+   * Selected end date as full date object
+   * @deprecated use valueAsDate instead
+   */
+  endAsDate?: Date;
+  /** Earliest allowed date as full date object */
+  minAsDate?: Date;
+  /** Latest allowed date as full date object */
+  maxAsDate?: Date;
+  /** Earliest allowed date ("yyyy-mm-dd") */
+  min?: string;
+  onMinChanged(min: string): void;
+  /** Latest allowed date ("yyyy-mm-dd") */
+  max?: string;
+  onMaxChanged(max: string): void;
+  /** 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"
+   */
+  intlPrevMonth?: string;
+  /** Localized string for "next month" (used for aria label)
+   * @default "Next month"
+   */
+  intlNextMonth?: string;
+  /** Localized string for "year" (used for aria label)
+   * @default "Year"
+   */
+  intlYear?: string;
+  /** BCP 47 language tag for desired language and country format */
+  locale?: string;
+  /** specify the scale of the date picker */
+  scale: "s" | "m" | "l";
+  /** Range mode activation */
+  range: boolean;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /**
+   * Selected start date
+   * @deprecated use value instead
+   */
+  start?: string;
+  /**
+   * 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;
+  /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
+  proximitySelectionDisabled: boolean;
+  /** Layout */
+  layout: "horizontal" | "vertical";
+  handleDateOrRangeChange(): void;
+  calciteDaySelectHandler(): void;
+  /**
+   * Trigger calcite date change when a user changes the date.
+   *
+   * @deprecated use `calciteInputDatePickerChange` instead.
+   */
+  calciteDatePickerChange: EventEmitter<Date>;
+  /**
+   * Trigger calcite date change when a user changes the date range.
+   * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)
+   *
+   * @deprecated use `calciteInputDatePickerChange` instead.
+   */
+  calciteDatePickerRangeChange: EventEmitter<DateRangeChange>;
+  /**
+   * This event fires when the input date picker value changes.
+   */
+  calciteInputDatePickerChange: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  calciteInputDatePickerOpen: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteInputDatePickerClose: EventEmitter;
+  /** Updates the position of the component. */
+  setFocus(): Promise<void>;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  disconnectedCallback(): void;
+  render(): VNode;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputDatePicker["value"];
+  focusedInput: "start" | "end";
+  private localeData;
+  private startInput;
+  private endInput;
+  private popper;
+  private menuEl;
+  private referenceEl;
+  private startWrapper;
+  private endWrapper;
+  private activeTransitionProp;
+  setReferenceEl(): void;
+  onLabelClick(): void;
+  transitionEnd: (event: TransitionEvent) => void;
+  setStartInput: (el: HTMLCalciteInputElement) => void;
+  setEndInput: (el: HTMLCalciteInputElement) => void;
+  deactivate: () => void;
+  keyUpHandler: (e: KeyboardEvent) => void;
+  inputBlur: (e: CustomEvent<any>) => void;
+  startInputFocus: () => void;
+  endInputFocus: () => void;
+  inputInput: (e: CustomEvent<any>) => void;
+  setMenuEl: (el: HTMLDivElement) => void;
+  setStartWrapper: (el: HTMLDivElement) => void;
+  setEndWrapper: (el: HTMLDivElement) => void;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  startWatcher(start: string): void;
+  endWatcher(end: string): void;
+  private loadLocaleData;
+  private clearCurrentValue;
+  /**
+   * If inputted string is a valid date, update value/active
+   */
+  private input;
+  /**
+   * Clean up invalid date from input on blur
+   */
+  private blur;
+  /**
+   * Event handler for when the selected date changes
+   */
+  handleDateChange: (event: CustomEvent<Date>) => void;
+  private shouldFocusRangeStart;
+  private shouldFocusRangeEnd;
+  private handleDateRangeChange;
+  /**
+   * Find a date from input string
+   * return false if date is invalid, or out of range
+   */
+  private getDateFromInput;
+}

package/dist/types/components/calcite-input-message/calcite-input-message.d.ts

@@ -0,0 +1,27 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale, Status } from "../interfaces";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class CalciteInputMessage {
+  el: HTMLCalciteInputMessageElement;
+  /** Indicates whether the message is displayed. */
+  active: boolean;
+  /** when used as a boolean set to true, show a default icon based on status. You can
+   * also pass a calcite-ui-icon name to this prop to display a custom icon */
+  icon: boolean | string;
+  /** specify the scale of the input, defaults to m */
+  scale: Scale;
+  /** specify the status of the input field, determines message and icons */
+  status: Status;
+  /** specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)
+   * @deprecated "floating" type is no longer supported
+   */
+  type: "default";
+  handleIconEl(): void;
+  connectedCallback(): void;
+  render(): VNode;
+  /** the computed icon to render */
+  private requestedIcon?;
+  private renderIcon;
+}

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

@@ -0,0 +1,90 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+export declare class CalciteInputTimePicker implements LabelableComponent, FormComponent {
+  el: HTMLCalciteInputTimePickerElement;
+  /** The active state of the time input */
+  active: boolean;
+  /** The disabled state of the time input */
+  disabled: boolean;
+  /** aria-label for the hour input */
+  intlHour?: string;
+  /** aria-label for the hour down button */
+  intlHourDown?: string;
+  /** aria-label for the hour up button */
+  intlHourUp?: string;
+  /** aria-label for the meridiem (am/pm) input */
+  intlMeridiem?: string;
+  /** aria-label for the meridiem (am/pm) down button */
+  intlMeridiemDown?: string;
+  /** aria-label for the meridiem (am/pm) up button */
+  intlMeridiemUp?: string;
+  /** aria-label for the minute input */
+  intlMinute?: string;
+  /** aria-label for the minute down button */
+  intlMinuteDown?: string;
+  /** aria-label for the minute up button */
+  intlMinuteUp?: string;
+  /** aria-label for the second input */
+  intlSecond?: string;
+  /** aria-label for the second down button */
+  intlSecondDown?: string;
+  /** aria-label for the second up button */
+  intlSecondUp?: string;
+  /**
+   * BCP 47 language tag for desired language and country format
+   * @internal
+   */
+  locale: string;
+  localeWatcher(newLocale: string): void;
+  /** The name of the time input */
+  name: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /** The scale (size) of the time input */
+  scale: Scale;
+  /** number (seconds) that specifies the granularity that the value must adhere to */
+  step: number;
+  /** The selected time in UTC (always 24-hour format) */
+  value: string;
+  valueWatcher(newValue: string): void;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputTimePicker["value"];
+  private calciteInputEl;
+  private calciteTimePickerEl;
+  /** whether the value of the input was changed as a result of user typing or not */
+  private internalValueChange;
+  private previousValidValue;
+  private referenceElementId;
+  localizedValue: string;
+  /**
+   * Fires when the time value is changed as a result of user input.
+   */
+  calciteInputTimePickerChange: EventEmitter<string>;
+  private calciteInputBlurHandler;
+  private calciteInputFocusHandler;
+  private calciteInputInputHandler;
+  clickHandler(event: MouseEvent): void;
+  keyUpHandler(event: KeyboardEvent): void;
+  timePickerBlurHandler(event: CustomEvent): void;
+  private timePickerChangeHandler;
+  timePickerFocusHandler(event: CustomEvent): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  onLabelClick(): void;
+  private shouldIncludeSeconds;
+  private setCalciteInputEl;
+  private setCalciteTimePickerEl;
+  private setInputValue;
+  private setValue;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,33 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Alignment, Scale, Status } from "../interfaces";
+/**
+ * @slot - A slot for adding text and a component that can be labeled.
+ */
+export declare class CalciteLabel {
+  el: HTMLCalciteLabelElement;
+  /** specify the text alignment of the label */
+  alignment: Alignment;
+  /**
+   * specify the status of the label and any child input / input messages
+   * @deprecated set directly on child element instead
+   */
+  status: Status;
+  /** The id of the input associated with the label */
+  for: string;
+  /** 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";
+  /** eliminates any space around the label */
+  disableSpacing: boolean;
+  /** is the label disabled  */
+  disabled: boolean;
+  /**
+   * @internal
+   */
+  calciteInternalLabelClick: EventEmitter<{
+    sourceEvent: MouseEvent;
+  }>;
+  labelClickHandler: (event: MouseEvent) => void;
+  render(): VNode;
+}