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

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

@@ -0,0 +1,186 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { StrictModifiers } from "@popperjs/core";
+import { DateRangeChange } from "../date-picker/interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteInputDatePickerElement;
+  /**
+   * When false, the component won't be interactive.
+   */
+  disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /** Selected date */
+  value: string | string[];
+  valueHandler(value: string | string[]): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  /**
+   * 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;
+  componentDidRender(): void;
+  render(): VNode;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: InputDatePicker["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/input-message/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 InputMessage {
+  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/input-time-picker/input-time-picker.d.ts

@@ -0,0 +1,94 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteInputTimePickerElement;
+  /** The active state of the time input */
+  active: boolean;
+  activeHandler(): void;
+  /** The disabled state of the time input */
+  disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /** 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: InputTimePicker["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;
+  componentDidRender(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,39 @@
+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 Label {
+  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
+   *
+   * @deprecated use the `disabled` property on the interactive components instead
+   */
+  disabled: boolean;
+  /**
+   * @internal
+   */
+  calciteInternalLabelClick: EventEmitter<{
+    sourceEvent: MouseEvent;
+  }>;
+  labelClickHandler: (event: MouseEvent) => void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,36 @@
+import { VNode } from "../../stencil-public-runtime";
+import { FlipContext } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/** Any attributes placed on <calcite-link> component will propagate to the rendered child */
+/** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
+/** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */
+/** @slot - A slot for adding text. */
+export declare class Link implements InteractiveComponent {
+  el: HTMLCalciteLinkElement;
+  /** is the link disabled  */
+  disabled: boolean;
+  /** Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+   * Without a value, the browser will suggest a filename/extension
+   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+   */
+  download: string | boolean;
+  /** optionally pass a href - used to determine if the component should render as a link or an anchor */
+  href?: string;
+  /** 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 */
+  iconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of a button - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** The rel attribute to apply to the hyperlink */
+  rel?: string;
+  /** The target attribute to apply to the hyperlink */
+  target?: string;
+  componentDidRender(): void;
+  render(): VNode;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** the rendered child element */
+  private childEl;
+  private storeTagRef;
+}

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

@@ -0,0 +1,22 @@
+import { VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * A general purpose list that enables users to construct list items that conform to Calcite styling.
+ * @slot - A slot for adding `calcite-list-item` elements.
+ */
+export declare class List implements InteractiveComponent {
+  /**
+   * When true, disabled prevents user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  componentDidRender(): void;
+  el: HTMLCalciteListElement;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  render(): VNode;
+}

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

@@ -0,0 +1,42 @@
+import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
+ * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
+ * @slot content-start - A slot for adding non-actionable elements before the label and description of the list item.
+ * @slot content-end - A slot for adding non-actionable elements after the label and description of the list item.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.
+ */
+export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent {
+  /**
+   * When true, prevents the content of the list item from user interaction.
+   */
+  nonInteractive: boolean;
+  /**
+   * An optional description for this item.  This will appear below the label text.
+   */
+  description: string;
+  /**
+   * When true, disabled prevents interaction.
+   */
+  disabled: boolean;
+  /**
+   * The label text of the list item. This will appear above the description text.
+   */
+  label: string;
+  el: HTMLCalciteListItemElement;
+  focusEl: HTMLButtonElement;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  renderActionsStart(): VNode;
+  renderActionsEnd(): VNode;
+  renderContentStart(): VNode;
+  renderContentEnd(): VNode;
+  renderContent(): VNode;
+  renderContentContainer(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,18 @@
+import { VNode } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+/**
+ * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
+ */
+export declare class ListItemGroup {
+  /**
+   * The title used for all nested `calcite-list-item` rows.
+   *
+   */
+  heading: string;
+  /**
+   * Number at which section headings should start for this component.
+   */
+  headingLevel: HeadingLevel;
+  el: HTMLCalciteListItemGroupElement;
+  render(): VNode;
+}

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

@@ -0,0 +1,27 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export declare class Loader {
+  el: HTMLCalciteLoaderElement;
+  /** Show the loader */
+  active: boolean;
+  /** Inline loaders are smaller and will appear to the left of the text */
+  inline: boolean;
+  /** Accessible name for the component */
+  label: string;
+  /** Speficy the scale of the loader. Defaults to "m" */
+  scale: Scale;
+  /** Use indeterminate if finding actual progress value is impossible */
+  type: "indeterminate" | "determinate";
+  /** Percent complete of 100, only valid for determinate indicators */
+  value: number;
+  /** Text which should appear under the loading indicator (optional) */
+  text: string;
+  /** Turn off spacing around the loader */
+  noPadding: boolean;
+  render(): VNode;
+  /**
+   * Return the proper sizes based on the scale property
+   */
+  private getSize;
+  private getInlineSize;
+}

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

@@ -0,0 +1,89 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { ModalBackgroundColor } from "./interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot header - a slot for adding a modal header
+ * @slot content - a slot for adding modal content
+ * @slot primary - a slot for adding a primary button
+ * @slot secondary - a slot for adding a secondary button
+ * @slot back - a slot for adding a back button
+ */
+export declare class Modal implements ConditionalSlotComponent {
+  el: HTMLCalciteModalElement;
+  /** Add the active attribute to open the modal */
+  active: boolean;
+  /** Optionally pass a function to run before close */
+  beforeClose: (el: HTMLElement) => Promise<void>;
+  /** Disables the display a close button within the Modal */
+  disableCloseButton: boolean;
+  /** Disables the closing of the Modal when clicked outside. */
+  disableOutsideClose: boolean;
+  /** Aria label for the close button */
+  intlClose: string;
+  /** Prevent the modal from taking up the entire screen on mobile */
+  docked: boolean;
+  /** Specify an element to focus when the modal is first opened */
+  firstFocus?: HTMLElement;
+  /** Flag to disable the default close on escape behavior */
+  disableEscape: boolean;
+  /** specify the scale of modal, defaults to m */
+  scale: Scale;
+  /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
+  width: Scale | number;
+  /** Set the modal to always be fullscreen (overrides width) */
+  fullscreen: boolean;
+  /** Adds a color bar at the top for visual impact,
+   * Use color to add importance to destructive/workflow dialogs. */
+  color?: "red" | "blue";
+  /** Background color of modal content */
+  backgroundColor: ModalBackgroundColor;
+  /** Turn off spacing around the content area slot */
+  noPadding: boolean;
+  componentWillLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  renderFooter(): VNode;
+  renderCloseButton(): VNode;
+  renderStyle(): VNode;
+  hasFooter: boolean;
+  closeButtonEl: HTMLButtonElement;
+  contentId: string;
+  modalContent: HTMLDivElement;
+  private mutationObserver;
+  previousActiveElement: HTMLElement;
+  titleId: string;
+  private activeTransitionProp;
+  handleEscape(e: KeyboardEvent): void;
+  /** Fired when the modal finishes the open animation */
+  calciteModalOpen: EventEmitter;
+  /** Fired when the modal finishes the close animation */
+  calciteModalClose: EventEmitter;
+  /**
+   * Focus first interactive element
+   * @deprecated use `setFocus` instead.
+   */
+  focusElement(el?: HTMLElement): Promise<void>;
+  /**
+   * Sets focus on the component.
+   *
+   * By default, will try to focus on any focusable content. If there is none, it will focus on the close button.
+   * If you want to focus on the close button, you can use the `close-button` focus ID.
+   */
+  setFocus(focusId?: "close-button"): Promise<void>;
+  /** Set the scroll top of the modal content */
+  scrollContent(top?: number, left?: number): Promise<void>;
+  transitionEnd: (event: TransitionEvent) => void;
+  toggleModal(value: boolean, oldValue: boolean): Promise<void>;
+  private openEnd;
+  /** Open the modal */
+  private open;
+  handleOutsideClose: () => void;
+  /** Close the modal, first running the `beforeClose` method */
+  close: () => Promise<void>;
+  focusFirstElement: () => void;
+  focusLastElement: () => void;
+  private removeOverflowHiddenClass;
+  private updateFooterVisibility;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale, Width } from "../interfaces";
+import { StatusColor } from "../alert/interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
+ * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
+ * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
+ * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
+ */
+/**
+ * @slot title - Title of the notice (optional)
+ * @slot message - Main text of the notice
+ * @slot link - Optional action to take from the notice (undo, try again, link to page, etc.)
+ * @slot actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.
+ */
+export declare class Notice implements ConditionalSlotComponent {
+  el: HTMLCalciteNoticeElement;
+  /** Is the notice currently active or not */
+  active: boolean;
+  /** Color for the notice (will apply to top border and icon) */
+  color: StatusColor;
+  /** Optionally show a button the user can click to dismiss the notice */
+  dismissible: boolean;
+  /** when used as a boolean set to true, show a default recommended icon. You can
+   * also pass a calcite-ui-icon name to this prop to display a requested icon */
+  icon: string | boolean;
+  /** String for the close button.
+   * @default "Close"
+   */
+  intlClose: string;
+  /** specify the scale of the notice, defaults to m */
+  scale: Scale;
+  /** specify the width of the notice, defaults to auto */
+  width: Width;
+  updateRequestedIcon(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  render(): VNode;
+  /** Fired when an notice is closed */
+  calciteNoticeClose: EventEmitter;
+  /** Fired when an Notice is opened */
+  calciteNoticeOpen: EventEmitter;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  private close;
+  /** the close button element */
+  private closeButton?;
+  /** the computed icon to render */
+  private requestedIcon?;
+}