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

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

@@ -15,9 +15,11 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   alignment: Position;
   /** should the input autofocus */
   autofocus: boolean;
-  /** optionally display a clear button that displays when field has a value
+  /**
+   * 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" */
+   * will not display for type="textarea"
+   */
   clearable: boolean;
   /** is the input disabled  */
   disabled: boolean;
@@ -26,12 +28,19 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   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
+  /**
+   * 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 */
+   * calcite-ui-icon name to this prop to display a requested icon for any input type
+   */
   icon: string | boolean;
+  /**
+   * A text label that will appear on the clear button for screen readers.
+   */
+  intlClear?: string;
   /**
    * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;
@@ -42,9 +51,14 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   /** specify if the input is in loading state */
   loading: boolean;
   /** BCP 47 language tag for desired language and country format */
-  locale?: string;
+  locale: string;
+  /**
+   * standard UniCode numeral system tag for localization
+   */
+  numberingSystem?: string;
   /**
    * Toggles locale formatting for numbers.
+   *
    * @internal
    */
   localeFormat: boolean;
@@ -58,6 +72,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   minWatcher(): void;
   /**
    * Maximum length of text input.
+   *
    * @deprecated use maxLength instead
    */
   maxlength?: number;
@@ -83,9 +98,11 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   status: Status;
   /** input step */
   step?: number | "any";
-  /** optionally add suffix  **/
+  /** optionally add suffix  */
   suffixText?: string;
-  /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+  /**
+   * @internal
+   */
   editingEnabled: boolean;
   /**
    * specify the input type
@@ -95,7 +112,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   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;
+  valueWatcher(newValue: string, previousValue: string): void;
   updateRequestedIcon(): void;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
@@ -107,18 +124,18 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   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 previousEmittedValue;
   private previousValue;
+  private previousValueOrigin;
   /** the computed icon to render */
   private requestedIcon?;
   private nudgeNumberValueIntervalId;
   mutationObserver: MutationObserver;
+  private userChangedValue;
   localizedValue: string;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -128,11 +145,11 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   /**
    * @internal
    */
-  calciteInputFocus: EventEmitter;
+  calciteInternalInputFocus: EventEmitter;
   /**
    * @internal
    */
-  calciteInputBlur: EventEmitter;
+  calciteInternalInputBlur: EventEmitter;
   /**
    * This event fires each time a new value is typed.
    */
@@ -147,6 +164,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   onLabelClick(): void;
   incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void;
   private clearInputValue;
+  private emitChangeIfUserModified;
   private inputBlurHandler;
   private inputFocusHandler;
   private inputInputHandler;
@@ -162,6 +180,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   private setChildNumberElRef;
   private setDisabledAction;
   private setInputValue;
+  private setPreviousEmittedValue;
   private setPreviousValue;
   private setValue;
   private inputKeyUpHandler;

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

@@ -25,3 +25,6 @@ export declare const INPUT_TYPE_ICONS: {
 export declare const SLOTS: {
   action: string;
 };
+export declare const TEXT: {
+  clear: string;
+};

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

@@ -2,7 +2,7 @@ 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 { OverlayPositioning, ComputedPlacement, MenuPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { DateRangeChange } from "../date-picker/interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
@@ -20,6 +20,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * Defines the available placements that can be used when a flip occurs.
    */
   flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   /**
    * Number at which section headings should start for this component.
    */
@@ -28,11 +29,13 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   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;
@@ -53,15 +56,21 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * The picker's name. Gets submitted with the form.
    */
   name: string;
-  /** Localized string for "previous month" (used for aria label)
+  /**
+   * Localized string for "previous month" (used for aria label)
+   *
    * @default "Previous month"
    */
   intlPrevMonth?: string;
-  /** Localized string for "next month" (used for aria label)
+  /**
+   * Localized string for "next month" (used for aria label)
+   *
    * @default "Next month"
    */
   intlNextMonth?: string;
-  /** Localized string for "year" (used for aria label)
+  /**
+   * Localized string for "year" (used for aria label)
+   *
    * @default "Year"
    */
   intlYear?: string;
@@ -69,6 +78,12 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   locale?: string;
   /** specify the scale of the date picker */
   scale: "s" | "m" | "l";
+  /**
+   * Determines where the date-picker component will be positioned relative to the input.
+   *
+   * @default "bottom-leading"
+   */
+  placement: MenuPlacement;
   /** Range mode activation */
   range: boolean;
   /**
@@ -79,11 +94,13 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   required: boolean;
   /**
    * Selected start date
+   *
    * @deprecated use value instead
    */
   start?: string;
   /**
    * Selected end date
+   *
    * @deprecated use value instead
    */
   end?: string;
@@ -103,8 +120,8 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   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)
    *
+   * @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>;
@@ -115,11 +132,11 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   /**
    * @internal
    */
-  calciteInputDatePickerOpen: EventEmitter;
+  calciteInternalInputDatePickerOpen: EventEmitter;
   /**
    * @internal
    */
-  calciteInputDatePickerClose: EventEmitter;
+  calciteInternalInputDatePickerClose: EventEmitter;
   /** Updates the position of the component. */
   setFocus(): Promise<void>;
   /** Updates the position of the component. */
@@ -129,6 +146,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;
+  filteredFlipPlacements: ComputedPlacement[];
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: InputDatePicker["value"];
@@ -143,11 +161,13 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private endWrapper;
   private activeTransitionProp;
   setReferenceEl(): void;
+  setFilteredPlacements: () => void;
   onLabelClick(): void;
   transitionEnd: (event: TransitionEvent) => void;
   setStartInput: (el: HTMLCalciteInputElement) => void;
   setEndInput: (el: HTMLCalciteInputElement) => void;
   deactivate: () => void;
+  keyDownHandler: (event: KeyboardEvent) => void;
   keyUpHandler: (e: KeyboardEvent) => void;
   inputBlur: (e: CustomEvent<any>) => void;
   startInputFocus: () => void;
@@ -165,14 +185,20 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private clearCurrentValue;
   /**
    * If inputted string is a valid date, update value/active
+   *
+   * @param value
    */
   private input;
   /**
    * Clean up invalid date from input on blur
+   *
+   * @param target
    */
   private blur;
   /**
    * Event handler for when the selected date changes
+   *
+   * @param event
    */
   handleDateChange: (event: CustomEvent<Date>) => void;
   private shouldFocusRangeStart;
@@ -181,6 +207,8 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   /**
    * Find a date from input string
    * return false if date is invalid, or out of range
+   *
+   * @param value
    */
   private getDateFromInput;
 }

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

@@ -7,14 +7,18 @@ 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 */
+  /**
+   * 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)
+  /**
+   * 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";

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

@@ -1,5 +1,6 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { PopperPlacement } from "../../utils/popper";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
@@ -37,6 +38,7 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   intlSecondUp?: string;
   /**
    * BCP 47 language tag for desired language and country format
+   *
    * @internal
    */
   locale: string;
@@ -51,6 +53,12 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   required: boolean;
   /** The scale (size) of the time input */
   scale: Scale;
+  /**
+   * Determines where the popover will be positioned relative to the input.
+   *
+   * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+   */
+  placement: PopperPlacement;
   /** number (seconds) that specifies the granularity that the value must adhere to */
   step: number;
   /** The selected time in UTC (always 24-hour format) */
@@ -65,13 +73,14 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   private internalValueChange;
   private previousValidValue;
   private referenceElementId;
+  popoverEl: HTMLCalcitePopoverElement;
   localizedValue: string;
   /**
    * Fires when the time value is changed as a result of user input.
    */
   calciteInputTimePickerChange: EventEmitter<string>;
-  private calciteInputBlurHandler;
-  private calciteInputFocusHandler;
+  private calciteInternalInputBlurHandler;
+  private calciteInternalInputFocusHandler;
   private calciteInputInputHandler;
   clickHandler(event: MouseEvent): void;
   keyUpHandler(event: KeyboardEvent): void;
@@ -80,8 +89,12 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   timePickerFocusHandler(event: CustomEvent): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
   onLabelClick(): void;
   private shouldIncludeSeconds;
+  private setCalcitePopoverEl;
   private setCalciteInputEl;
   private setCalciteTimePickerEl;
   private setInputValue;

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

@@ -3,6 +3,7 @@ export declare type Appearance = "solid" | "clear" | "outline";
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type FlipContext = "both" | "start" | "end";
 export declare type Layout = "horizontal" | "vertical" | "grid";
+export declare type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
 export declare type Position = "start" | "end";
 export declare type Scale = "s" | "m" | "l";
 export declare type Status = "invalid" | "valid" | "idle";

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

@@ -9,6 +9,7 @@ export declare class Label {
   alignment: Alignment;
   /**
    * specify the status of the label and any child input / input messages
+   *
    * @deprecated set directly on child element instead
    */
   status: Status;

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

@@ -9,7 +9,8 @@ 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:
+  /**
+   * 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
    */

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

@@ -7,11 +7,11 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class List implements InteractiveComponent {
   /**
-   * When true, disabled prevents user interaction.
+   * When true, prevents user interaction.
    */
   disabled: boolean;
   /**
-   * Number at which section headings should start for this component.
+   * Number at which section headings should start for the list.
    */
   headingLevel: HeadingLevel;
   componentDidRender(): void;

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

@@ -14,15 +14,15 @@ export declare class ListItem implements ConditionalSlotComponent, InteractiveCo
    */
   nonInteractive: boolean;
   /**
-   * An optional description for this item.  This will appear below the label text.
+   * An optional description for the list item. Displays below the label text.
    */
   description: string;
   /**
-   * When true, disabled prevents interaction.
+   * When true, prevents user interaction.
    */
   disabled: boolean;
   /**
-   * The label text of the list item. This will appear above the description text.
+   * The label text of the list item. Displays above the description text.
    */
   label: string;
   el: HTMLCalciteListItemElement;

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

@@ -10,6 +10,7 @@ export declare const CSS: {
   description: string;
   contentEnd: string;
   actionsEnd: string;
+  hasCenterContent: string;
 };
 export declare const SLOTS: {
   actionsStart: string;

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

@@ -5,12 +5,12 @@ import { HeadingLevel } from "../functional/Heading";
  */
 export declare class ListItemGroup {
   /**
-   * The title used for all nested `calcite-list-item` rows.
+   * The title for all nested `calcite-list-item` rows.
    *
    */
   heading: string;
   /**
-   * Number at which section headings should start for this component.
+   * Number at which section headings should start for the group.
    */
   headingLevel: HeadingLevel;
   el: HTMLCalciteListItemGroupElement;

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

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

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

@@ -3,42 +3,42 @@ 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
+ * @slot header - A slot for adding a `calcite-modal` header.
+ * @slot content - A slot for adding `calcite-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 */
+  /** When true, the `calcite-modal` is active. */
   active: boolean;
-  /** Optionally pass a function to run before close */
-  beforeClose: (el: HTMLElement) => Promise<void>;
-  /** Disables the display a close button within the Modal */
+  /** Passes a function to run before the `calcite-modal` closes. */
+  beforeClose?: (el: HTMLElement) => Promise<void>;
+  /** When true, disables the close button within the `calcite-modal`. */
   disableCloseButton: boolean;
-  /** Disables the closing of the Modal when clicked outside. */
+  /** When true, disables the closing of the `calcite-modal` when clicked outside. */
   disableOutsideClose: boolean;
-  /** Aria label for the close button */
+  /** Accessible label for the close button. */
   intlClose: string;
-  /** Prevent the modal from taking up the entire screen on mobile */
+  /** When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices. */
   docked: boolean;
-  /** Specify an element to focus when the modal is first opened */
-  firstFocus?: HTMLElement;
-  /** Flag to disable the default close on escape behavior */
+  /** When true, disables the default close on escape behavior. */
   disableEscape: boolean;
-  /** specify the scale of modal, defaults to m */
+  /** Specify the scale of `calcite-modal`. */
   scale: Scale;
-  /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
+  /** Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels). */
   width: Scale | number;
-  /** Set the modal to always be fullscreen (overrides width) */
+  /** Set the `calcite-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. */
+  /**
+   * Adds a color bar to the top of `calcite-modal` for visual impact.
+   * Use color to add importance to destructive or workflow dialogs.
+   */
   color?: "red" | "blue";
-  /** Background color of modal content */
+  /** Sets the background color of `calcite-modal` content. */
   backgroundColor: ModalBackgroundColor;
-  /** Turn off spacing around the content area slot */
+  /** When true, disables spacing to the content area slot. */
   noPadding: boolean;
   componentWillLoad(): void;
   connectedCallback(): void;
@@ -56,23 +56,32 @@ export declare class Modal implements ConditionalSlotComponent {
   titleId: string;
   private activeTransitionProp;
   handleEscape(e: KeyboardEvent): void;
-  /** Fired when the modal finishes the open animation */
+  /** Emits when `calcite-modal` finishes the open animation. */
   calciteModalOpen: EventEmitter;
-  /** Fired when the modal finishes the close animation */
+  /** Emits when `calcite-modal` finishes the close animation. */
   calciteModalClose: EventEmitter;
   /**
-   * Focus first interactive element
+   * Focus the first interactive element.
+   *
+   * @param el
    * @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.
+   * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
+   * To focus on the close button, use the `close-button` focus ID.
+   *
+   * @param focusId
    */
   setFocus(focusId?: "close-button"): Promise<void>;
-  /** Set the scroll top of the modal content */
+  /**
+   * Set the scroll top of the `calcite-modal` content.
+   *
+   * @param top
+   * @param left
+   */
   scrollContent(top?: number, left?: number): Promise<void>;
   transitionEnd: (event: TransitionEvent) => void;
   toggleModal(value: boolean, oldValue: boolean): Promise<void>;