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

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

@@ -12,7 +12,13 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * When false, the component won't be interactive.
    */
   disabled: boolean;
-  handleDisabledChange(value: boolean): void;
+  /**
+   * When true, still focusable but controls are gone and the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  handleDisabledAndReadOnlyChange(value: boolean): void;
   /** Selected date */
   value: string | string[];
   valueHandler(value: string | string[]): void;
@@ -29,11 +35,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;
@@ -54,15 +62,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;
@@ -72,6 +86,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   scale: "s" | "m" | "l";
   /**
    * Determines where the date-picker component will be positioned relative to the input.
+   *
    * @default "bottom-leading"
    */
   placement: MenuPlacement;
@@ -85,11 +100,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;
@@ -109,8 +126,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>;
@@ -121,11 +138,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. */
@@ -174,14 +191,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;
@@ -190,6 +213,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-date-picker/resources.d.ts

@@ -0,0 +1,4 @@
+export declare const CSS: {
+  menu: string;
+  menuActive: string;
+};

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-number/input-number.d.ts

@@ -0,0 +1,216 @@
+import { Scale, Status } from "../interfaces";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { InputPlacement } from "./interfaces";
+import { Position } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+declare type NumberNudgeDirection = "up" | "down";
+/**
+ * @slot action - A slot for positioning a button next to the component.
+ */
+export declare class InputNumber implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteInputNumberElement;
+  /** Specifies the text alignment of the component's value. */
+  alignment: Position;
+  /**
+   * When true, the component is focused on page load.
+   *
+   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+   */
+  autofocus: boolean;
+  /**
+   * When true, a clear button is displayed when the component has a value.
+   */
+  clearable: boolean;
+  /**
+   * When true, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+   */
+  disabled: boolean;
+  disabledWatcher(): void;
+  /**
+   * When true, number values are displayed with the locale's group separator.
+   */
+  groupSeparator: boolean;
+  /**
+   * When true, the component will not be visible.
+   *
+   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+   */
+  hidden: boolean;
+  /**
+   * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+   */
+  icon: string | boolean;
+  /**
+   * A text label that will appear on the clear button for screen readers.
+   */
+  intlClear?: string;
+  /**
+   * Accessible name that will appear while loading.
+   *
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** When true, the icon is flipped in RTL. */
+  iconFlipRtl: boolean;
+  /** Accessible name for the component's button or hyperlink. */
+  label?: string;
+  /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+  loading: boolean;
+  /** Specifies the BCP 47 language tag for the desired language and country format. */
+  locale: string;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   *
+   * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+   */
+  numberingSystem?: string;
+  /**
+   * Toggles locale formatting for numbers.
+   *
+   * @internal
+   */
+  localeFormat: boolean;
+  /**
+   * Specifies the maximum value.
+   *
+   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
+   */
+  max?: number;
+  /** watcher to update number-to-string for max */
+  maxWatcher(): void;
+  /**
+   * Specifies the minimum value.
+   *
+   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
+   */
+  min?: number;
+  /** watcher to update number-to-string for min */
+  minWatcher(): void;
+  /**
+   * Specifies the maximum length of text for the component's value.
+   *
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+   */
+  maxLength?: number;
+  /**
+   * Specifies the minimum length of text for the component's value.
+   *
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+   */
+  minLength?: number;
+  /**
+   * Specifies the name of the component.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+   */
+  name: string;
+  /** Specifies the placement of the buttons. */
+  numberButtonType?: InputPlacement;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  placeholder: string;
+  /** Adds text to the start of the component. */
+  prefixText?: string;
+  /**
+   * When true, the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  /** When true, the component must have a value in order for the form to submit. */
+  required: boolean;
+  /** Specifies the size of the component. */
+  scale: Scale;
+  /** Specifies the status of the input field, which determines message and icons. */
+  status: Status;
+  /**
+   * Specifies the granularity that the component's value must adhere to.
+   *
+   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
+   */
+  step?: number | "any";
+  /** Adds text to the end of the component.  */
+  suffixText?: string;
+  /**
+   * @internal
+   */
+  editingEnabled: boolean;
+  /** The component's value. */
+  value: string;
+  valueWatcher(newValue: string, previousValue: string): void;
+  updateRequestedIcon(): void;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: InputNumber["value"];
+  inlineEditableEl: HTMLCalciteInlineEditableElement;
+  /** number text input element for locale */
+  private childNumberEl?;
+  get isClearable(): boolean;
+  private minString?;
+  private maxString?;
+  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;
+  componentWillLoad(): void;
+  componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean;
+  componentDidRender(): void;
+  /**
+   * @internal
+   */
+  calciteInternalInputNumberFocus: EventEmitter;
+  /**
+   * @internal
+   */
+  calciteInternalInputNumberBlur: EventEmitter;
+  /**
+   * Fires each time a new value is typed.
+   */
+  calciteInputNumberInput: EventEmitter;
+  /**
+   * Fires each time a new value is typed and committed.
+   */
+  calciteInputNumberChange: EventEmitter<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** Selects all text of the component's `value`. */
+  selectText(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  onLabelClick(): void;
+  incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void;
+  private clearInputValue;
+  private emitChangeIfUserModified;
+  private inputNumberBlurHandler;
+  private inputNumberFocusHandler;
+  private inputNumberInputHandler;
+  private inputNumberKeyDownHandler;
+  private nudgeNumberValue;
+  private nudgeButtonPointerUpAndOutHandler;
+  private nudgeButtonPointerDownHandler;
+  onFormReset(): void;
+  syncHiddenFormInput(input: HTMLInputElement): void;
+  private setChildNumberElRef;
+  private setDisabledAction;
+  private setInputNumberValue;
+  private setPreviousEmittedNumberValue;
+  private setPreviousNumberValue;
+  private setNumberValue;
+  private inputNumberKeyUpHandler;
+  private warnAboutInvalidNumberValue;
+  render(): VNode;
+}
+export {};

package/dist/types/components/input-number/interfaces.d.ts

@@ -0,0 +1 @@
+export declare type InputPlacement = "vertical" | "horizontal" | "none";

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

@@ -0,0 +1,22 @@
+export declare const CSS: {
+  loader: string;
+  clearButton: string;
+  editingEnabled: string;
+  inlineChild: string;
+  inputIcon: string;
+  prefix: string;
+  suffix: string;
+  numberButtonWrapper: string;
+  buttonItemHorizontal: string;
+  wrapper: string;
+  inputWrapper: string;
+  actionWrapper: string;
+  resizeIconWrapper: string;
+  numberButtonItem: string;
+};
+export declare const SLOTS: {
+  action: string;
+};
+export declare const TEXT: {
+  clear: string;
+};

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

@@ -11,7 +11,13 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   activeHandler(): void;
   /** The disabled state of the time input */
   disabled: boolean;
-  handleDisabledChange(value: boolean): void;
+  /**
+   * When true, still focusable but controls are gone and the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  handleDisabledAndReadOnlyChange(value: boolean): void;
   /** aria-label for the hour input */
   intlHour?: string;
   /** aria-label for the hour down button */
@@ -38,6 +44,7 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   intlSecondUp?: string;
   /**
    * BCP 47 language tag for desired language and country format
+   *
    * @internal
    */
   locale: string;
@@ -54,6 +61,7 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   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;
@@ -77,8 +85,8 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
    * 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;

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;
@@ -18,14 +19,18 @@ export declare class Label {
   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;
+  /**
+   * eliminates any space around the label
+   *
+   * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
+   */
+  disableSpacing: boolean;
   /**
    * @internal
    */

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

@@ -3,15 +3,16 @@ 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.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   componentDidRender(): void;

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

@@ -3,26 +3,26 @@ 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.
+ * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
+ * @slot content-start - A slot for adding non-actionable elements before the label and description of the component.
+ * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
  */
 export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * When true, prevents the content of the list item from user interaction.
+   * When true, prevents the content of the component from user interaction.
    */
   nonInteractive: boolean;
   /**
-   * An optional description for this item.  This will appear below the label text.
+   * A description for the component. Displays below the label text.
    */
-  description: string;
+  description?: string;
   /**
-   * When true, disabled prevents interaction.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * The label text of the list item. This will appear above the description text.
+   * The label text of the component. Displays above the description text.
    */
   label: string;
   el: HTMLCalciteListItemElement;

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 header text for all nested `calcite-list-item` rows.
    *
    */
   heading: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   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 component 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 component. */
   label: string;
-  /** Speficy the scale of the loader. Defaults to "m" */
+  /** Specifies the size of the component. */
   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 */
+  /** The component's value. 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 component's indicator. */
+  text?: string;
+  /** Disables spacing around the component. */
   noPadding: boolean;
   render(): VNode;
   /**
    * Return the proper sizes based on the scale property
+   *
+   * @param scale
    */
   private getSize;
   private getInlineSize;