@esri/calcite-components 1.0.0-beta.79 → 1.0.0-beta.82

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

@@ -0,0 +1,189 @@
+/// <reference types="lodash" />
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
+import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { StrictModifiers } from "@popperjs/core";
+import { Scale } from "../interfaces";
+import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+interface ItemData {
+  label: string;
+  value: string;
+}
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteComboboxElement;
+  /** Opens or closes the combobox */
+  active: boolean;
+  activeHandler(): void;
+  /** Disable combobox input */
+  disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /** Aria label for combobox (required) */
+  label: string;
+  /** Placeholder text for input */
+  placeholder?: string;
+  /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
+  maxItems: number;
+  maxItemsHandler(): void;
+  /** The name of the switch input */
+  name: string;
+  /** Allow entry of custom values which are not in the original set of items */
+  allowCustomValues: boolean;
+  /** 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;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /** specify the selection mode
+   * - multi: allow any number of selected items (default)
+   * - single: only one selection)
+   * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
+   */
+  selectionMode: ComboboxSelectionMode;
+  /** Specify the scale of the combobox, defaults to m */
+  scale: Scale;
+  /** The value(s) of the selectedItem(s) */
+  value: string | string[];
+  valueHandler(value: string | string[]): void;
+  /** string to override the English "Remove tag" text for when an item is selected.
+   * @default "Remove tag"
+   */
+  intlRemoveTag: string;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
+  documentClickHandler(event: Event): void;
+  calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /**
+   * Called when the selected items set changes
+   * @deprecated use calciteComboboxChange instead
+   */
+  calciteLookupChange: EventEmitter<HTMLCalciteComboboxItemElement[]>;
+  /**
+   * Called when the selected item(s) changes.
+   */
+  calciteComboboxChange: EventEmitter<{
+    selectedItems: HTMLCalciteComboboxItemElement[];
+  }>;
+  /** Called when the user has entered text to filter the options list */
+  calciteComboboxFilterChange: EventEmitter<{
+    visibleItems: HTMLCalciteComboboxItemElement[];
+    text: string;
+  }>;
+  /** Called when a selected item in the combobox is dismissed via its chip **/
+  calciteComboboxChipDismiss: EventEmitter;
+  /**
+   * Fired when the combobox is opened
+   * @internal
+   */
+  calciteComboboxOpen: EventEmitter;
+  /**
+   *  Fired when the combobox is closed
+   * @internal
+   */
+  calciteComboboxClose: EventEmitter;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  filteredFlipPlacements: ComputedPlacement[];
+  internalValueChangeFlag: boolean;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: Combobox["value"];
+  items: HTMLCalciteComboboxItemElement[];
+  groupItems: HTMLCalciteComboboxItemGroupElement[];
+  selectedItems: HTMLCalciteComboboxItemElement[];
+  selectedItemsHandler(): void;
+  visibleItems: HTMLCalciteComboboxItemElement[];
+  needsIcon: boolean;
+  activeItemIndex: number;
+  activeChipIndex: number;
+  activeDescendant: string;
+  text: string;
+  /** when search text is cleared, reset active to  */
+  textHandler(): void;
+  textInput: HTMLInputElement;
+  data: ItemData[];
+  mutationObserver: MutationObserver;
+  resizeObserver: ResizeObserver;
+  private guid;
+  private inputHeight;
+  private popper;
+  private menuEl;
+  private referenceEl;
+  private listContainerEl;
+  private ignoreSelectedEventsFlag;
+  private activeTransitionProp;
+  setFilteredPlacements: () => void;
+  getValue: () => string | string[];
+  onLabelClick: () => void;
+  private comboboxInViewport;
+  keydownHandler: (event: KeyboardEvent) => void;
+  private toggleCloseEnd;
+  private toggleOpenEnd;
+  transitionEnd: (event: TransitionEvent) => void;
+  setMaxScrollerHeight: () => void;
+  calciteChipDismissHandler: (event: CustomEvent<HTMLCalciteChipElement>, comboboxItem: HTMLCalciteComboboxItemElement) => void;
+  clickHandler: (event: MouseEvent) => void;
+  setInactiveIfNotContained: (event: Event) => void;
+  setMenuEl: (el: HTMLDivElement) => void;
+  setListContainerEl: (el: HTMLDivElement) => void;
+  setReferenceEl: (el: HTMLDivElement) => void;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  private getMaxScrollerHeight;
+  private calculateSingleItemHeight;
+  inputHandler: (event: Event) => void;
+  getCombinedItems(): ComboboxChildElement[];
+  filterItems: import("lodash").DebouncedFunc<(text: string) => void>;
+  internalCalciteLookupChangeEvent: () => void;
+  emitCalciteLookupChange: import("lodash").DebouncedFunc<() => void>;
+  internalComboboxChangeEvent: () => void;
+  emitComboboxChange: import("lodash").DebouncedFunc<() => void>;
+  toggleSelection(item: HTMLCalciteComboboxItemElement, value?: boolean): void;
+  updateAncestors(item: HTMLCalciteComboboxItemElement): void;
+  getVisibleItems(): HTMLCalciteComboboxItemElement[];
+  getSelectedItems(): HTMLCalciteComboboxItemElement[];
+  updateItems: () => void;
+  getData(): ItemData[];
+  getNeedsIcon(): boolean;
+  resetText(): void;
+  getItems(): HTMLCalciteComboboxItemElement[];
+  getGroupItems(): HTMLCalciteComboboxItemGroupElement[];
+  addCustomChip(value: string, focus?: boolean): void;
+  removeActiveChip(): void;
+  removeLastChip(): void;
+  previousChip(): void;
+  nextChip(): void;
+  focusChip(): void;
+  private scrollToActiveItem;
+  shiftActiveItemIndex(delta: number): void;
+  updateActiveItemIndex(index: number): void;
+  isMulti(): boolean;
+  comboboxFocusHandler: () => void;
+  comboboxBlurHandler: (event: FocusEvent) => void;
+  renderChips(): VNode[];
+  renderInput(): VNode;
+  renderListBoxOptions(): VNode[];
+  renderPopperContainer(): VNode;
+  renderIconStart(): VNode;
+  renderIconEnd(): VNode;
+  render(): VNode;
+}
+export {};

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

@@ -0,0 +1,6 @@
+export interface listItem {
+  label: string;
+  value: string;
+}
+export declare type ComboboxSelectionMode = "single" | "multi" | "ancestors";
+export declare type ComboboxChildElement = HTMLCalciteComboboxItemElement | HTMLCalciteComboboxItemGroupElement;

package/dist/types/components/combobox/resources.d.ts

@@ -4,3 +4,7 @@ export declare const ComboboxChildSelector: string;
 export declare const TEXT: {
   removeTag: string;
 };
+export declare const CSS: {
+  labelActive: string;
+  labelSelected: string;
+};

package/dist/types/components/combobox/utils.d.ts

@@ -0,0 +1,6 @@
+import { ComboboxChildElement } from "./interfaces";
+export declare function getAncestors(element: HTMLElement): ComboboxChildElement[];
+export declare function getItemAncestors(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
+export declare function getItemChildren(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
+export declare function hasActiveChildren(node: HTMLCalciteComboboxItemElement): boolean;
+export declare function getDepth(element: HTMLElement): number;

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

@@ -0,0 +1,48 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ComboboxChildElement } from "../combobox/interfaces";
+import { Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding nested `calcite-combobox-item`s.
+ */
+export declare class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {
+  /** 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;
+  componentDidRender(): 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/combobox-item-group/combobox-item-group.d.ts

@@ -0,0 +1,17 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ComboboxChildElement } from "../combobox/interfaces";
+import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
+export declare class ComboboxItemGroup {
+  /** 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/date-picker/date-picker.d.ts

@@ -0,0 +1,132 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { DateRangeChange } from "./interfaces";
+export declare class DatePicker {
+  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/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/date-picker-day/date-picker-day.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DateLocaleData } from "../date-picker/utils";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class DatePickerDay implements InteractiveComponent {
+  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;
+  componentDidRender(): void;
+  isTabbable(): boolean;
+}

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

@@ -0,0 +1,97 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HoverRange } from "../../utils/date";
+import { DateLocaleData } from "../date-picker/utils";
+import { Scale } from "../interfaces";
+export declare class DatePickerMonth {
+  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/date-picker-month-header/date-picker-month-header.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DateLocaleData } from "../date-picker/utils";
+import { Scale } from "../interfaces";
+import { HeadingLevel } from "../functional/Heading";
+export declare class DatePickerMonthHeader {
+  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 onYearChange;
+  private onYearInput;
+  private prevMonthClick;
+  private prevMonthKeydown;
+  private nextMonthClick;
+  private nextMonthKeydown;
+  private handleArrowClick;
+  private getInRangeDate;
+  /**
+   * Parse localized year string from input,
+   * set to active if in range
+   */
+  private setYear;
+}