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

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

@@ -0,0 +1,46 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ComboboxChildElement } from "../calcite-combobox/interfaces";
+import { Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding nested `calcite-combobox-item`s.
+ */
+export declare class CalciteComboboxItem implements ConditionalSlotComponent {
+  /** When true, the item cannot be clicked and is visually muted. */
+  disabled: boolean;
+  /** Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */
+  selected: boolean;
+  /** True when item is highlighted either from keyboard or mouse hover */
+  active: boolean;
+  /** Parent and grandparent combobox items, this is set internally for use from combobox */
+  ancestors: ComboboxChildElement[];
+  /** Unique identifier, used for accessibility */
+  guid: string;
+  /** Custom icon to display both in combobox chips and next to combobox item text */
+  icon?: string;
+  selectedWatchHandler(): void;
+  /** The main label for this item. */
+  textLabel: string;
+  /** The item's associated value */
+  value: any;
+  /** Don't filter this item based on the search text */
+  constant: boolean;
+  el: HTMLCalciteComboboxItemElement;
+  isNested: boolean;
+  scale: Scale;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * Emitted whenever the item is selected or unselected.
+   */
+  calciteComboboxItemChange: EventEmitter;
+  /**
+   * Used to toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   */
+  toggleSelected(coerce?: boolean): Promise<void>;
+  itemClickHandler: (event: MouseEvent) => void;
+  renderIcon(isSingle: boolean): VNode;
+  renderChildren(): VNode;
+  render(): VNode;
+}

package/dist/types/components/calcite-combobox-item-group/calcite-combobox-item-group.d.ts

@@ -0,0 +1,17 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ComboboxChildElement } from "../calcite-combobox/interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
+export declare class CalciteComboboxItemGroup {
+  /** Parent and grandparent combobox items, this is set internally for use from combobox */
+  ancestors: ComboboxChildElement[];
+  /** Title of the group */
+  label: string;
+  connectedCallback(): void;
+  el: HTMLCalciteComboboxItemGroupElement;
+  guid: string;
+  scale: Scale;
+  render(): VNode;
+}

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

@@ -0,0 +1,132 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/CalciteHeading";
+import { DateRangeChange } from "./interfaces";
+export declare class CalciteDatePicker {
+  el: HTMLCalciteDatePickerElement;
+  /** Active range */
+  activeRange?: "start" | "end";
+  /** Selected date */
+  value?: string | string[];
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /** Selected date as full date object*/
+  valueAsDate?: Date | Date[];
+  handleValueAsDate(date: Date | Date[]): void;
+  /**
+   * 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;
+  handleRangeChange(): void;
+  /** Earliest allowed date ("yyyy-mm-dd") */
+  min?: string;
+  onMinChanged(min: string): void;
+  /** Latest allowed date ("yyyy-mm-dd") */
+  max?: string;
+  onMaxChanged(max: string): void;
+  /** 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;
+  /**
+   * Selected start date
+   * @deprecated use value instead
+   */
+  start?: string;
+  /**
+   * Selected end date
+   * @deprecated use value instead
+   */
+  end?: string;
+  /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
+  proximitySelectionDisabled: boolean;
+  /**
+   * Trigger calcite date change when a user changes the date.
+   */
+  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)
+   */
+  calciteDatePickerRangeChange: EventEmitter<DateRangeChange>;
+  /**
+   * Active date.
+   */
+  activeDate: Date;
+  /**
+   * Active start date.
+   */
+  activeStartDate: Date;
+  /**
+   * Active end date.
+   */
+  activeEndDate: Date;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  render(): VNode;
+  private localeData;
+  private hoverRange;
+  private mostRecentRangeValue?;
+  keyUpHandler: (e: KeyboardEvent) => void;
+  valueHandler(value: string | string[]): void;
+  startWatcher(start: string): void;
+  endWatcher(end: string): void;
+  private loadLocaleData;
+  monthHeaderSelectChange: (e: CustomEvent<Date>) => void;
+  monthActiveDateChange: (e: CustomEvent<Date>) => void;
+  monthHoverChange: (e: CustomEvent<Date>) => void;
+  monthMouseOutChange: () => void;
+  /**
+   * Render calcite-date-picker-month-header and calcite-date-picker-month
+   */
+  private renderCalendar;
+  /**
+   * Update date instance of start if valid
+   */
+  private setStartAsDate;
+  /**
+   * Update date instance of end if valid
+   */
+  private setEndAsDate;
+  /**
+   * Reset active date and close
+   */
+  reset: () => void;
+  private setEndDate;
+  private setStartDate;
+  /**
+   * Event handler for when the selected date changes
+   */
+  private monthDateChange;
+  /**
+   * Get an active date using the value, or current date as default
+   */
+  private getActiveDate;
+  private getActiveStartDate;
+  private getActiveEndDate;
+}

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

@@ -0,0 +1,45 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DateLocaleData } from "../calcite-date-picker/utils";
+import { Scale } from "../interfaces";
+export declare class CalciteDatePickerDay {
+  el: HTMLCalciteDatePickerDayElement;
+  /** Day of the month to be shown. */
+  day: number;
+  /** Date is outside of range and can't be selected */
+  disabled: boolean;
+  /** Date is in the current month. */
+  currentMonth: boolean;
+  /** Date is the current selected date of the picker */
+  selected: boolean;
+  /** Date is currently highlighted as part of the range */
+  highlighted: boolean;
+  /** Showing date range */
+  range: boolean;
+  /** Date is the start of date range */
+  startOfRange: boolean;
+  /** Date is the end of date range */
+  endOfRange: boolean;
+  /** Date is being hovered and within the set range */
+  rangeHover: boolean;
+  /** Date is actively in focus for keyboard navigation */
+  active: boolean;
+  /** CLDR data for current locale */
+  localeData: DateLocaleData;
+  /** specify the scale of the date picker */
+  scale: Scale;
+  /** Date value for the day. */
+  value: Date;
+  onClick: () => void;
+  keyDownHandler: (e: KeyboardEvent) => void;
+  mouseoverHandler(): void;
+  /**
+   * Emitted when user selects day
+   */
+  calciteDaySelect: EventEmitter;
+  /**
+   * Emitted when user hovers over a day
+   * @internal
+   */
+  calciteDayHover: EventEmitter;
+  render(): VNode;
+}

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

@@ -0,0 +1,97 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HoverRange } from "../../utils/date";
+import { DateLocaleData } from "../calcite-date-picker/utils";
+import { Scale } from "../interfaces";
+export declare class CalciteDatePickerMonth {
+  el: HTMLCalciteDatePickerMonthElement;
+  /** Already selected date.*/
+  selectedDate: Date;
+  /** Date currently active.*/
+  activeDate: Date;
+  /** Start date currently active. */
+  startDate?: Date;
+  /** End date currently active  */
+  endDate?: Date;
+  /** Minimum date of the calendar below which is disabled.*/
+  min: Date;
+  /** Maximum date of the calendar above which is disabled.*/
+  max: Date;
+  /** specify the scale of the date picker */
+  scale: Scale;
+  /**
+   * CLDR locale data for current locale
+   *
+   * @internal
+   */
+  localeData: DateLocaleData;
+  /** The range of dates currently being hovered */
+  hoverRange: HoverRange;
+  /**
+   * Event emitted when user selects the date.
+   */
+  calciteDatePickerSelect: EventEmitter;
+  /**
+   * Event emitted when user hovers the date.
+   * @internal
+   */
+  calciteDatePickerHover: EventEmitter;
+  /**
+   * Active date for the user keyboard access.
+   */
+  calciteDatePickerActiveDateChange: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteDatePickerMouseOut: EventEmitter;
+  keyDownHandler: (e: KeyboardEvent) => void;
+  /**
+   * Once user is not interacting via keyboard,
+   * disable auto focusing of active date
+   */
+  disableActiveFocus: () => void;
+  mouseoutHandler(): void;
+  render(): VNode;
+  private activeFocus;
+  /**
+   * Add n months to the current month
+   */
+  private addMonths;
+  /**
+   * Add n days to the current date
+   */
+  private addDays;
+  /**
+   * Get dates for last days of the previous month
+   */
+  private getPrevMonthdays;
+  /**
+   * Get dates for the current month
+   */
+  private getCurrentMonthDays;
+  /**
+   * Get dates for first days of the next month
+   */
+  private getNextMonthDays;
+  /**
+   * Determine if the date is in between the start and end dates
+   */
+  private betweenSelectedRange;
+  /**
+   * Determine if the date should be in selected state
+   */
+  private isSelected;
+  /**
+   * Determine if the date is the start of the date range
+   */
+  private isStartOfRange;
+  private isEndOfRange;
+  dayHover: (e: CustomEvent) => void;
+  daySelect: (e: CustomEvent) => void;
+  /**
+   * Render calcite-date-picker-day
+   */
+  private renderDateDay;
+  private isFocusedOnStart;
+  private isHoverInRange;
+  private isRangeHover;
+}

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

@@ -0,0 +1,57 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DateLocaleData } from "../calcite-date-picker/utils";
+import { Scale } from "../interfaces";
+import { HeadingLevel } from "../functional/CalciteHeading";
+export declare class CalciteDatePickerMonthHeader {
+  el: HTMLCalciteDatePickerMonthHeaderElement;
+  /** Already selected date. */
+  selectedDate: Date;
+  /** Focused date with indicator (will become selected date if user proceeds) */
+  activeDate: Date;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  /** Minimum date of the calendar below which is disabled. */
+  min: Date;
+  /** Maximum date of the calendar above which is disabled. */
+  max: Date;
+  /** User's language and region as BCP 47 formatted string. */
+  locale: string;
+  /** Localized string for previous month. */
+  intlPrevMonth: string;
+  /** Localized string for next month. */
+  intlNextMonth: string;
+  /** Localized string for year. */
+  intlYear: string;
+  /** specify the scale of the date picker */
+  scale: Scale;
+  /** CLDR locale data for translated calendar info */
+  localeData: DateLocaleData;
+  /**
+   *  Changes to active date
+   */
+  calciteDatePickerSelect: EventEmitter<Date>;
+  connectedCallback(): void;
+  render(): VNode;
+  renderContent(): VNode;
+  private yearInput;
+  nextMonthDate: Date;
+  prevMonthDate: Date;
+  setNextPrevMonthDates(): void;
+  /**
+   * Increment year on UP/DOWN keys
+   */
+  private onYearKey;
+  private yearChanged;
+  private prevMonthClick;
+  private prevMonthKeydown;
+  private nextMonthClick;
+  private nextMonthKeydown;
+  private handleArrowClick;
+  /**
+   * Parse localized year string from input,
+   * set to active if in range
+   */
+  private setYear;
+}

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

@@ -0,0 +1,99 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DropdownPlacement, ItemKeyboardEvent } from "./interfaces";
+import { OverlayPositioning } from "../../utils/popper";
+import { StrictModifiers } from "@popperjs/core";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
+ * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ */
+export declare class CalciteDropdown {
+  el: HTMLCalciteDropdownElement;
+  /** Opens or closes the dropdown */
+  active: boolean;
+  activeHandler(): void;
+  /**
+   allow the dropdown to remain open after a selection is made
+   if the selection-mode of the selected item's containing group is "none", the dropdown will always close
+   */
+  disableCloseOnSelect: boolean;
+  /** is the dropdown disabled  */
+  disabled: boolean;
+  /**
+   specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
+   this value does not include groupTitles passed to calcite-dropdown-group
+  */
+  maxItems: number;
+  maxItemsHandler(): void;
+  /** 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;
+  /**
+   * Determines where the dropdown will be positioned relative to the button.
+   * @default "bottom-leading"
+   */
+  placement: DropdownPlacement;
+  placementHandler(): void;
+  /** specify the scale of dropdown, defaults to m */
+  scale: Scale;
+  /**
+   * **read-only** The currently selected items
+   *
+   * @readonly
+   */
+  selectedItems: HTMLCalciteDropdownItemElement[];
+  /** specify whether the dropdown is opened by hover or click of a trigger element */
+  type: "hover" | "click";
+  /** specify the width of dropdown, defaults to m */
+  width: Scale;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  /** fires when a dropdown item has been selected or deselected **/
+  calciteDropdownSelect: EventEmitter<void>;
+  /** fires when a dropdown has been opened **/
+  calciteDropdownOpen: EventEmitter<void>;
+  /** fires when a dropdown has been closed **/
+  calciteDropdownClose: EventEmitter<void>;
+  closeCalciteDropdownOnClick(e: Event): void;
+  closeCalciteDropdownOnEvent(): void;
+  closeCalciteDropdownOnOpenEvent(e: Event): void;
+  mouseEnterHandler(): void;
+  mouseLeaveHandler(): void;
+  calciteDropdownItemKeyEvent(e: CustomEvent<ItemKeyboardEvent>): void;
+  handleItemSelect(event: CustomEvent): void;
+  private items;
+  /** trigger elements */
+  private triggers;
+  private popper;
+  private menuEl;
+  private referenceEl;
+  private activeTransitionProp;
+  private scrollerEl;
+  mutationObserver: MutationObserver;
+  resizeObserver: ResizeObserver;
+  updateItems: () => void;
+  setMaxScrollerHeight: () => void;
+  setScrollerEl: (scrollerEl: HTMLDivElement) => void;
+  transitionEnd: (event: TransitionEvent) => void;
+  setReferenceEl: (el: HTMLDivElement) => void;
+  setMenuEl: (el: HTMLDivElement) => void;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  private keyDownHandler;
+  private updateSelectedItems;
+  private getMaxScrollerHeight;
+  private closeCalciteDropdown;
+  private focusOnFirstActiveOrFirstItem;
+  private focusFirstItem;
+  private focusLastItem;
+  private focusNextItem;
+  private focusPrevItem;
+  private itemIndex;
+  private getFocusableElement;
+  private toggleOpenEnd;
+  private openCalciteDropdown;
+}

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

@@ -0,0 +1,32 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { SelectionMode } from "./interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-dropdown-item`s.
+ */
+export declare class CalciteDropdownGroup {
+  el: HTMLCalciteDropdownGroupElement;
+  /** optionally set a group title for display */
+  groupTitle?: string;
+  /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+   none (no active items), defaults to single */
+  selectionMode: SelectionMode;
+  /**
+   * Specifies the size of the action.
+   */
+  scale: Scale;
+  /**
+   * @internal
+   */
+  calciteDropdownItemChange: EventEmitter;
+  componentWillLoad(): void;
+  render(): VNode;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  /** position of group within a dropdown */
+  private groupPosition;
+  /** the requested group */
+  private requestedDropdownGroup;
+  /** the requested item */
+  private requestedDropdownItem;
+  private getGroupPosition;
+}

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

@@ -0,0 +1,52 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ItemKeyboardEvent } from "../calcite-dropdown/interfaces";
+import { FlipContext } from "../interfaces";
+/**
+ * @slot - A slot for adding text.
+ */
+export declare class CalciteDropdownItem {
+  el: HTMLCalciteDropdownItemElement;
+  /** Indicates whether the item is active. */
+  active: boolean;
+  /** flip the icon(s) in rtl */
+  iconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of an item - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** optionally pass an icon to display at the end of an item - accepts calcite ui icon names  */
+  iconEnd?: string;
+  /** optionally pass a href - used to determine if the component should render as anchor */
+  href?: string;
+  /** Applies to the aria-label attribute on the button or hyperlink */
+  label?: string;
+  /** The rel attribute to apply to the hyperlink */
+  rel?: string;
+  /** The target attribute to apply to the hyperlink */
+  target?: string;
+  /**
+   * @internal
+   */
+  calciteDropdownItemSelect: EventEmitter;
+  /** @internal */
+  calciteDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;
+  /** @internal */
+  calciteDropdownCloseRequest: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  connectedCallback(): void;
+  render(): VNode;
+  onClick(): void;
+  keyDownHandler(e: KeyboardEvent): void;
+  updateActiveItemOnChange(event: CustomEvent): void;
+  /** id of containing group */
+  private parentDropdownGroupEl;
+  /** requested group */
+  private requestedDropdownGroup;
+  /** requested item */
+  private requestedDropdownItem;
+  /** what selection mode is the parent dropdown group in */
+  private selectionMode;
+  /** if href is requested, track the rendered child link*/
+  private childLink;
+  private determineActiveItem;
+  private emitRequestedItem;
+}

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

@@ -0,0 +1,47 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Appearance, Scale } from "../interfaces";
+import { ButtonColor } from "../calcite-button/interfaces";
+export declare class CalciteFab {
+  /**
+   * Used to set the button's appearance. Default is outline.
+   */
+  appearance: Extract<"solid" | "outline", Appearance>;
+  /**
+   * Used to set the button's color. Default is light.
+   */
+  color: ButtonColor;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * 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/.
+   * @default "plus"
+   */
+  icon?: string;
+  /**
+   * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop.
+   */
+  label?: string;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * Specifies the size of the fab.
+   */
+  scale: Scale;
+  /**
+   * Text that accompanies the FAB icon.
+   */
+  text?: string;
+  /**
+   * Indicates whether the text is displayed.
+   */
+  textEnabled: boolean;
+  el: HTMLCalciteFabElement;
+  private buttonEl;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  render(): VNode;
+}

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

@@ -0,0 +1,53 @@
+/// <reference types="lodash" />
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+export declare class CalciteFilter {
+  /**
+   * The items to filter through. The filter uses this as the starting point, and returns items
+   * that contain the string entered in the input, using a partial match and recursive search.
+   *
+   * This property is required.
+   */
+  items: object[];
+  watchItemsHandler(): void;
+  /**
+   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   */
+  disabled: boolean;
+  /**
+   * The resulting items after filtering.
+   *
+   * @readonly
+   */
+  filteredItems: CalciteFilter["items"];
+  /**
+   * A text label that will appear on the clear button.
+   */
+  intlClear?: string;
+  /**
+   * A text label that will appear next to the input field.
+   */
+  intlLabel?: string;
+  /**
+   * Placeholder text for the input element's placeholder attribute
+   */
+  placeholder?: string;
+  /**
+   * Filter value.
+   */
+  value?: string;
+  valueHandler(value: string): void;
+  el: HTMLCalciteFilterElement;
+  textInput: HTMLCalciteInputElement;
+  /**
+   * This event fires when the filter text changes.
+   */
+  calciteFilterChange: EventEmitter<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  filter: import("lodash").DebouncedFunc<(value: string) => void>;
+  inputHandler: (event: CustomEvent) => void;
+  keyDownHandler: ({ key }: KeyboardEvent) => void;
+  clear: () => void;
+  updateFiltered(filtered: any[]): void;
+  render(): VNode;
+}