@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -31,18 +31,26 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    */
   headingLevel: HeadingLevel;
   /**
-   * Tooltip used for the toggle when expanded.
+   * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+   *
+   * @default "Collapse"
    */
   intlCollapse?: string;
   /**
-   * Tooltip used for the toggle when collapsed.
+   * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+   *
+   * @default "Expand"
    */
   intlExpand?: string;
-  /** string to override English loading text
+  /**
+   * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;
-  /** Text string used for the actions menu
+  /**
+   * Text string used for the actions menu
+   *
    * @default "Options"
    */
   intlOptions?: string;
@@ -60,8 +68,14 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   status?: Status;
   /**
    * Block summary.
+   *
+   * @deprecated use description instead
    */
   summary: string;
+  /**Block description */
+  description: string;
+  /** When true, removes padding for the slotted content */
+  disablePadding: boolean;
   componentDidRender(): void;
   el: HTMLCalciteBlockElement;
   private guid;

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

@@ -11,6 +11,7 @@ export declare const CSS: {
   header: string;
   button: string;
   summary: string;
+  description: string;
   controlContainer: string;
   valid: string;
   invalid: string;

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

@@ -4,10 +4,11 @@ import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { InteractiveComponent } from "../../utils/interactive";
+import { FormOwner } from "../../utils/form";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
 /** @slot - A slot for adding text. */
-export declare class Button implements LabelableComponent, InteractiveComponent {
+export declare class Button implements LabelableComponent, InteractiveComponent, FormOwner {
   el: HTMLCalciteButtonElement;
   /** optionally specify alignment of button elements. */
   alignment?: ButtonAlignment;
@@ -27,7 +28,9 @@ export declare class Button implements LabelableComponent, InteractiveComponent
   iconFlipRtl?: FlipContext;
   /** optionally pass an icon to display at the start of a button - accepts calcite ui icon names  */
   iconStart?: string;
-  /** string to override English loading text
+  /**
+   * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;
@@ -65,7 +68,7 @@ export declare class Button implements LabelableComponent, InteractiveComponent
   setFocus(): Promise<void>;
   formEl: HTMLFormElement;
   labelEl: HTMLCalciteLabelElement;
-  /** watches for changing text content **/
+  /** watches for changing text content */
   private mutationObserver;
   /** the rendered child element */
   private childEl?;

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

@@ -1,6 +1,8 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { LogicalFlowPosition } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Cards do not include a grid or bounding container
+/**
+ * Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
 /**
@@ -19,18 +21,25 @@ export declare class Card implements ConditionalSlotComponent {
   selected: boolean;
   /** Indicates whether the card is selectable. */
   selectable: boolean;
-  /** string to override English loading text
+  /**
+   * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;
-  /** string to override English select text for checkbox when selectable is true
+  /**
+   * string to override English select text for checkbox when selectable is true
+   *
    * @default "Select"
    */
   intlSelect: string;
-  /** string to override English deselect text for checkbox when selectable is true
+  /**
+   * string to override English deselect text for checkbox when selectable is true
+   *
    * @default "Deselect"
    */
   intlDeselect: string;
+  thumbnailPosition: LogicalFlowPosition;
   /** Fired when a selectable card is selected */
   calciteCardSelect: EventEmitter;
   connectedCallback(): void;

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

@@ -4,8 +4,8 @@ export declare const CSS: {
   footer: string;
   title: string;
   subtitle: string;
-  thumbnailWrapper: string;
   checkboxWrapper: string;
+  thumbnailWrapper: string;
 };
 export declare const SLOTS: {
   thumbnail: string;

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

@@ -13,6 +13,7 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
   guid: string;
   /**
    * The hovered state of the checkbox.
+   *
    * @internal
    */
   hovered: boolean;
@@ -20,10 +21,11 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
    * True if the checkbox is initially indeterminate,
    * which is independent from its checked state
    * https://css-tricks.com/indeterminate-checkboxes/
-   * */
+   */
   indeterminate: boolean;
   /**
    * The label of the checkbox input
+   *
    * @internal
    */
   label?: string;
@@ -43,6 +45,7 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
   readonly indeterminatePath = "M13 8v1H3V8z";
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
+  defaultChecked: boolean;
   defaultValue: Checkbox["checked"];
   toggleEl: HTMLDivElement;
   /** Sets focus on the component. */

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

@@ -13,7 +13,9 @@ export declare class Chip implements ConditionalSlotComponent {
   color: ChipColor;
   /** Optionally show a button the user can click to dismiss the chip */
   dismissible: boolean;
-  /** Aria label for the "x" button
+  /**
+   * Aria label for the "x" button
+   *
    * @default "Close"
    */
   dismissLabel?: string;
@@ -25,6 +27,8 @@ export declare class Chip implements ConditionalSlotComponent {
   scale: Scale;
   /** The assigned value for the chip */
   value: any;
+  /** When true, hides the chip  */
+  closed: boolean;
   el: HTMLCalciteChipElement;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -1,8 +1,9 @@
 export declare const CSS: {
   title: string;
   close: string;
-  chipImageContainer: string;
-  calciteChipIcon: string;
+  imageContainer: string;
+  chipIcon: string;
+  closeIcon: string;
 };
 export declare const TEXT: {
   close: string;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -29,6 +29,7 @@ export declare class ColorPicker implements InteractiveComponent {
    * The format of the value property.
    *
    * When "auto", the format will be inferred from `value` when set.
+   *
    * @default "auto"
    */
   format: Format;
@@ -39,80 +40,117 @@ export declare class ColorPicker implements InteractiveComponent {
   hideChannels: boolean;
   /** When true, hides the saved colors section */
   hideSaved: boolean;
-  /** Label used for the blue channel
+  /**
+   * Label used for the blue channel
+   *
    * @default "B"
    */
   intlB: string;
-  /** Label used for the blue channel description
+  /**
+   * Label used for the blue channel description
+   *
    * @default "Blue"
    */
   intlBlue: string;
-  /** Label used for the delete color button.
+  /**
+   * Label used for the delete color button.
+   *
    * @default "Delete color"
    */
   intlDeleteColor: string;
-  /** Label used for the green channel
+  /**
+   * Label used for the green channel
+   *
    * @default "G"
    */
   intlG: string;
-  /** Label used for the green channel description
+  /**
+   * Label used for the green channel description
+   *
    * @default "Green"
    */
   intlGreen: string;
-  /** Label used for the hue channel
+  /**
+   * Label used for the hue channel
+   *
    * @default "H"
    */
   intlH: string;
-  /** Label used for the HSV mode
+  /**
+   * Label used for the HSV mode
+   *
    * @default "HSV"
    */
   intlHsv: string;
-  /** Label used for the hex input
+  /**
+   * Label used for the hex input
+   *
    * @default "Hex"
    */
   intlHex: string;
-  /** Label used for the hue channel description
+  /**
+   * Label used for the hue channel description
+   *
    * @default "Hue"
    */
   intlHue: string;
   /**
    * Label used for the hex input when there is no color selected.
+   *
    * @default "No color"
    */
   intlNoColor: string;
-  /** Label used for the red channel
+  /**
+   * Label used for the red channel
+   *
    * @default "R"
    */
   intlR: string;
-  /** Label used for the red channel description
+  /**
+   * Label used for the red channel description
+   *
    * @default "Red"
    */
   intlRed: string;
-  /** Label used for the RGB mode
+  /**
+   * Label used for the RGB mode
+   *
    * @default "RGB"
    */
   intlRgb: string;
-  /** Label used for the saturation channel
+  /**
+   * Label used for the saturation channel
+   *
    * @default "S"
    */
   intlS: string;
-  /** Label used for the saturation channel description
+  /**
+   * Label used for the saturation channel description
+   *
    * @default "Saturation"
    */
   intlSaturation: string;
-  /** Label used for the save color button.
+  /**
+   * Label used for the save color button.
+   *
    * @default "Save color"
    */
   intlSaveColor: string;
-  /** Label used for the saved colors section
+  /**
+   * Label used for the saved colors section
+   *
    * @default "Saved"
    */
   intlSaved: string;
-  /** Label used for the value channel
+  /**
+   * Label used for the value channel
+   *
    * @default "V"
    */
   intlV: string;
-  /** Label used for the
+  /**
+   * Label used for the
+   *
    * @default "Value"
    */
   intlValue: string;
@@ -125,6 +163,8 @@ export declare class ColorPicker implements InteractiveComponent {
    * Storage ID for colors.
    */
   storageId: string;
+  /** standard UniCode numeral system tag for localization */
+  numberingSystem?: string;
   /**
    * The color value.
    *
@@ -132,6 +172,7 @@ export declare class ColorPicker implements InteractiveComponent {
    * a RGB, HSL or HSV object.
    *
    * The type will be preserved as the color is updated.
+   *
    * @default "#007ac2"
    * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
    */
@@ -190,11 +231,11 @@ export declare class ColorPicker implements InteractiveComponent {
   protected handleChannelKeyUpOrDown(event: KeyboardEvent): void;
   private handleChannelChange;
   private handleSavedColorKeyDown;
-  private handleColorFieldAndSliderMouseLeave;
-  private handleColorFieldAndSliderMouseDown;
-  private globalMouseUpHandler;
-  private globalMouseMoveHandler;
-  private handleColorFieldAndSliderMouseEnterOrMove;
+  private handleColorFieldAndSliderPointerLeave;
+  private handleColorFieldAndSliderPointerDown;
+  private globalPointerUpHandler;
+  private globalPointerMoveHandler;
+  private handleColorFieldAndSliderPointerEnterOrMove;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
@@ -206,6 +247,7 @@ export declare class ColorPicker implements InteractiveComponent {
   private renderChannelsTabTitle;
   private renderChannelsTab;
   private renderChannel;
+  handleKeyDown(event: KeyboardEvent): void;
   private showIncompatibleColorWarning;
   private setMode;
   private captureHueSliderColor;
@@ -221,6 +263,7 @@ export declare class ColorPicker implements InteractiveComponent {
   private setCanvasContextSize;
   private captureColorFieldColor;
   private initColorFieldAndSlider;
+  private updateCanvasSize;
   private containsPoint;
   private drawActiveColorFieldColor;
   private drawThumb;

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -12,11 +12,13 @@ export declare class ColorPickerHexInput {
   allowEmpty: boolean;
   /**
    * Label used for the hex input.
+   *
    * @default "Hex"
    */
   intlHex: string;
   /**
    * Label used for the hex input when there is no color selected.
+   *
    * @default "No color"
    */
   intlNoColor: string;
@@ -28,12 +30,14 @@ export declare class ColorPickerHexInput {
    * The hex value.
    */
   value: string;
+  /** standard UniCode numeral system tag for localization */
+  numberingSystem?: string;
   handleValueChange(value: string, oldValue: string): void;
   /**
    * Emitted when the hex value changes.
    */
   calciteColorPickerHexInputChange: EventEmitter;
-  private onCalciteInputBlur;
+  private onCalciteInternalInputBlur;
   private onInputChange;
   protected onInputKeyDown(event: KeyboardEvent): void;
   private inputNode;
@@ -49,4 +53,5 @@ export declare class ColorPickerHexInput {
   private storeInputRef;
   private formatForInternalInput;
   private nudgeRGBChannels;
+  handleKeyDown(event: KeyboardEvent): void;
 }

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

@@ -7,6 +7,7 @@ import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 interface ItemData {
   label: string;
   value: string;
@@ -14,11 +15,17 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent {
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent {
   el: HTMLCalciteComboboxElement;
-  /** Opens or closes the combobox */
+  /**
+   * When true, opens the combobox
+   *
+   * @deprecated use open instead
+   */
   active: boolean;
   activeHandler(): void;
+  /**When true, opens the combobox */
+  open: boolean;
   /** Disable combobox input */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
@@ -26,6 +33,8 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   label: string;
   /** Placeholder text for input */
   placeholder?: string;
+  /** Placeholder icon for input  */
+  placeholderIcon?: string;
   /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
   maxItems: number;
   maxItemsHandler(): void;
@@ -41,7 +50,8 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * @internal
    */
   required: boolean;
-  /** specify the selection mode
+  /**
+   * 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
@@ -52,7 +62,9 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   /** 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.
+  /**
+   * string to override the English "Remove tag" text for when an item is selected.
+   *
    * @default "Remove tag"
    */
   intlRemoveTag: string;
@@ -69,6 +81,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   setFocus(): Promise<void>;
   /**
    * Called when the selected items set changes
+   *
    * @deprecated use calciteComboboxChange instead
    */
   calciteLookupChange: EventEmitter<HTMLCalciteComboboxItemElement[]>;
@@ -83,18 +96,20 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
     visibleItems: HTMLCalciteComboboxItemElement[];
     text: string;
   }>;
-  /** Called when a selected item in the combobox is dismissed via its chip **/
+  /** 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;
+  calciteComboboxBeforeClose: EventEmitter<{
+    el: HTMLCalciteComboboxElement;
+  }>;
+  calciteComboboxClose: EventEmitter<{
+    el: HTMLCalciteComboboxElement;
+  }>;
+  calciteComboboxBeforeOpen: EventEmitter<{
+    el: HTMLCalciteComboboxElement;
+  }>;
+  calciteComboboxOpen: EventEmitter<{
+    el: HTMLCalciteComboboxElement;
+  }>;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
@@ -136,8 +151,13 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   keydownHandler: (event: KeyboardEvent) => void;
   private toggleCloseEnd;
   private toggleOpenEnd;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
   transitionEnd: (event: TransitionEvent) => void;
-  setMaxScrollerHeight: () => void;
+  transitionRunHandler: (event: TransitionEvent) => void;
+  setMaxScrollerHeight: () => Promise<void>;
   calciteChipDismissHandler: (event: CustomEvent<HTMLCalciteChipElement>, comboboxItem: HTMLCalciteComboboxItemElement) => void;
   clickHandler: (event: MouseEvent) => void;
   setInactiveIfNotContained: (event: Event) => void;

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

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

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

@@ -24,8 +24,16 @@ export declare class ComboboxItem implements ConditionalSlotComponent, Interacti
   textLabel: string;
   /** The item's associated value */
   value: any;
-  /** Don't filter this item based on the search text */
+  /**
+   * Don't filter this item based on the search text
+   *
+   * @deprecated use filterDisabled instead
+   */
   constant: boolean;
+  /**
+   * Do not filter this item based on the search text
+   */
+  filterDisabled: boolean;
   el: HTMLCalciteComboboxItemElement;
   isNested: boolean;
   scale: Scale;
@@ -39,6 +47,8 @@ export declare class ComboboxItem implements ConditionalSlotComponent, Interacti
   /**
    * 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.
+   *
+   * @param coerce
    */
   toggleSelected(coerce?: boolean): Promise<void>;
   itemClickHandler: (event: MouseEvent) => void;

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

@@ -16,11 +16,13 @@ export declare class DatePicker {
   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;
@@ -35,15 +37,21 @@ export declare class DatePicker {
   /** Latest allowed date ("yyyy-mm-dd") */
   max?: string;
   onMaxChanged(max: string): void;
-  /** 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;
@@ -55,11 +63,13 @@ export declare class DatePicker {
   range: boolean;
   /**
    * Selected start date
+   *
    * @deprecated use value instead
    */
   start?: string;
   /**
    * Selected end date
+   *
    * @deprecated use value instead
    */
   end?: string;
@@ -71,6 +81,7 @@ export declare class DatePicker {
   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>;
@@ -103,14 +114,26 @@ export declare class DatePicker {
   monthMouseOutChange: () => void;
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
+   *
+   * @param activeDate
+   * @param maxDate
+   * @param minDate
+   * @param date
+   * @param endDate
    */
   private renderCalendar;
   /**
    * Update date instance of start if valid
+   *
+   * @param startDate
+   * @param emit
    */
   private setStartAsDate;
   /**
    * Update date instance of end if valid
+   *
+   * @param endDate
+   * @param emit
    */
   private setEndAsDate;
   /**
@@ -121,10 +144,16 @@ export declare class DatePicker {
   private setStartDate;
   /**
    * Event handler for when the selected date changes
+   *
+   * @param e
    */
   private monthDateChange;
   /**
    * Get an active date using the value, or current date as default
+   *
+   * @param value
+   * @param min
+   * @param max
    */
   private getActiveDate;
   private getActiveStartDate;