@esri/calcite-components 1.3.0-next.2 → 1.3.0-next.20

package/dist/extras/vscode-data.json

@@ -1112,6 +1112,10 @@
           "name": "closed",
           "description": "When `true`, hides the component."
         },
+        {
+          "name": "disabled",
+          "description": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
         {
           "name": "icon",
           "description": "Specifies an icon to display."
@@ -1135,6 +1139,10 @@
             }
           ]
         },
+        {
+          "name": "label",
+          "description": "Accessible name for the component."
+        },
         {
           "name": "scale",
           "description": "Specifies the size of the component.",
@@ -1150,12 +1158,66 @@
             }
           ]
         },
+        {
+          "name": "selected",
+          "description": "When true, the component is selected."
+        },
         {
           "name": "value",
           "description": "The component's value."
         }
       ]
     },
+    {
+      "name": "calcite-chip-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the component."
+        },
+        {
+          "name": "scale",
+          "description": "Specifies the size of the component.",
+          "values": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        },
+        {
+          "name": "selection-mode",
+          "description": "Specifies the selection mode of the component.",
+          "values": [
+            {
+              "name": "multiple"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "single"
+            },
+            {
+              "name": "single-persist"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "calcite-color-picker",
       "description": {
@@ -2665,6 +2727,10 @@
           "name": "disabled",
           "description": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
+        {
+          "name": "focus-trap-disabled",
+          "description": "When `true`, prevents focus trapping."
+        },
         {
           "name": "form",
           "description": "The ID of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any."
@@ -3282,6 +3348,10 @@
           "name": "disabled",
           "description": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
+        {
+          "name": "focus-trap-disabled",
+          "description": "When `true`, prevents focus trapping."
+        },
         {
           "name": "form",
           "description": "The ID of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any."
@@ -3653,6 +3723,14 @@
         "value": "A general purpose list that enables users to construct list items that conform to Calcite styling.\n\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'."
       },
       "attributes": [
+        {
+          "name": "closable",
+          "description": "When `true`, a close button is added to the component."
+        },
+        {
+          "name": "closed",
+          "description": "When `true`, hides the component."
+        },
         {
           "name": "description",
           "description": "A description for the component. Displays below the label text."
@@ -3671,7 +3749,7 @@
         },
         {
           "name": "selected",
-          "description": "When `true`, the component is selected."
+          "description": "When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"` or `\"multiple\"`, the component is selected."
         },
         {
           "name": "value",
@@ -4837,6 +4915,18 @@
             }
           ]
         },
+        {
+          "name": "layout",
+          "description": "The direction of the component.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
         {
           "name": "position",
           "description": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).",

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.2
+ * v1.3.0-next.20
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.2
+ * v1.3.0-next.20
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.2
+ * v1.3.0-next.20
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.2
+ * v1.3.0-next.20
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

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

@@ -106,6 +106,13 @@ export declare class Button implements LabelableComponent, InteractiveComponent,
   defaultMessages: ButtonMessages;
   private updateHasContent;
   private setupTextContentObserver;
+  /** keeps track of the tooltipText */
+  tooltipText: string;
+  /** keep track of the rendered contentEl */
+  private contentEl;
+  resizeObserver: ResizeObserver;
   onLabelClick(): void;
   private handleClick;
+  private setTooltipText;
+  private setChildEl;
 }

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

@@ -1,15 +1,19 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Appearance, Kind, Scale, SelectionMode } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { LoadableComponent } from "../../utils/loadable";
-import { LocalizedComponent } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
-import { Appearance, Kind, Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+import { LocalizedComponent } from "../../utils/locale";
 import { ChipMessages } from "./assets/chip/t9n";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
  */
-export declare class Chip implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+export declare class Chip implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+  el: HTMLCalciteChipElement;
+  /** When true, interaction is prevented and the component is displayed with lower opacity. */
+  disabled: boolean;
   /** Specifies the appearance style of the component. */
   appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
   /** Specifies the kind of the component (will apply to border and background if applicable). */
@@ -22,10 +26,21 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
   iconFlipRtl: boolean;
   /** Specifies the size of the component. */
   scale: Scale;
+  /** Accessible name for the component. */
+  label: string;
   /** The component's value. */
   value: any;
   /** When `true`, hides the component. */
   closed: boolean;
+  /**
+   * This internal property, managed by a containing `calcite-chip-group`, is
+   * conditionally set based on the `selectionMode` of the parent
+   *
+   * @internal
+   */
+  selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
+  /** When true, the component is selected.  */
+  selected: boolean;
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -37,32 +52,52 @@ export declare class Chip implements ConditionalSlotComponent, LoadableComponent
    */
   messages: ChipMessages;
   onMessagesChange(): void;
-  el: HTMLCalciteChipElement;
+  /**
+   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.
+   * This is set to `true` by a parent Chip Group component.
+   *
+   * @internal
+   */
+  interactive: boolean;
   defaultMessages: ChipMessages;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
+  private hasText;
+  private hasImage;
+  private containerEl;
+  private closeButtonEl;
+  private parentGroupEl;
+  private mutationObserver;
+  /**
+   * Fires when the component's close button is selected.
+   */
+  calciteChipClose: EventEmitter<void>;
+  /**
+   * Fires when the selected state of the component changes.
+   */
+  calciteChipSelect: EventEmitter<void>;
+  /**
+   * @internal
+   */
+  calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;
   connectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
-  /** When `closable` is `true`, sets focus on the component's "close" button (the first focusable item). */
+  keyDownHandler(event: KeyboardEvent): void;
+  clickHandler(): void;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  /**
-   * Fires when the close button is clicked.
-   */
-  calciteChipClose: EventEmitter<void>;
-  closeClickHandler: (event: MouseEvent) => void;
-  private updateHasContent;
+  private close;
+  private closeButtonKeyDownHandler;
+  private updateHasText;
   private setupTextContentObserver;
   private handleSlotImageChange;
-  /** watches for changing text content */
-  private mutationObserver;
-  private closeButton;
-  private guid;
-  /** determine if there is slotted content for styling purposes */
-  private hasContent;
-  /** determine if there is slotted image for styling purposes */
-  private hasImage;
+  private handleEmittingEvent;
   renderChipImage(): VNode;
+  renderSelectionIcon(): VNode;
+  renderCloseButton(): VNode;
+  renderIcon(): VNode;
   render(): VNode;
 }

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

@@ -3,14 +3,23 @@ export declare const CSS: {
   close: string;
   imageContainer: string;
   chipIcon: string;
-  closeIcon: string;
-  contentSlotted: string;
+  textSlotted: string;
   container: string;
   imageSlotted: string;
+  closable: string;
+  multiple: string;
+  selectable: string;
+  selectIcon: string;
+  selectIconActive: string;
+  nonInteractive: string;
+  isCircle: string;
 };
 export declare const SLOTS: {
   image: string;
 };
 export declare const ICONS: {
   close: string;
+  unchecked: string;
+  checkedSingle: string;
+  checked: string;
 };

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

@@ -0,0 +1,44 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { InteractiveComponent } from "../../utils/interactive";
+import { Scale, SelectionMode } from "../interfaces";
+/**
+ * @slot - A slot for adding one or more `calcite-chip`s.
+ */
+export declare class ChipGroup implements InteractiveComponent {
+  el: HTMLCalciteChipGroupElement;
+  /** When true, interaction is prevented and the component is displayed with lower opacity. */
+  disabled: boolean;
+  /** Accessible name for the component. */
+  label: string;
+  /** Specifies the size of the component. */
+  scale: Scale;
+  /** Specifies the selection mode of the component. */
+  selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
+  onSelectionModeChange(): void;
+  /**
+   * Specifies the component's selected items.
+   *
+   * @readonly
+   */
+  selectedItems: HTMLCalciteChipElement[];
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
+  private items;
+  private slotRefEl;
+  /** Emits when the component's selection changes. */
+  calciteChipGroupSelect: EventEmitter<void>;
+  connectedCallback(): void;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  calciteInternalChipKeyEventListener(event: CustomEvent): void;
+  calciteChipCloseListener(event: CustomEvent): void;
+  calciteChipSelectListener(event: CustomEvent): void;
+  /**
+   * Sets focus on the component's first focusable element.
+   */
+  setFocus(): Promise<void>;
+  private updateItems;
+  private setSelectedItems;
+  render(): VNode;
+}

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

@@ -20,7 +20,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   el: HTMLCalciteComboboxElement;
   /**When `true`, displays and positions the component. */
   open: boolean;
-  openHandler(value: boolean): void;
+  openHandler(): void;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;

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

@@ -21,6 +21,12 @@ export declare class DatePickerDay implements InteractiveComponent {
   highlighted: boolean;
   /** When `true`, activates the component's range mode to allow a start and end date. */
   range: boolean;
+  /**
+   * When `true`, highlight styling for edge dates is applied.
+   *
+   * @internal
+   */
+  rangeEdge: "start" | "end" | undefined;
   /** Date is the start of date range */
   startOfRange: boolean;
   /** Date is the end of date range */
@@ -35,7 +41,7 @@ export declare class DatePickerDay implements InteractiveComponent {
   value: Date;
   onClick: () => void;
   keyDownHandler: (event: KeyboardEvent) => void;
-  mouseoverHandler(): void;
+  pointerOverHandler(): void;
   /**
    * Emitted when user selects day
    */

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

@@ -60,7 +60,7 @@ export declare class DatePickerMonth {
    * disable auto focusing of active date
    */
   disableActiveFocus: () => void;
-  mouseoutHandler(): void;
+  pointerOutHandler(): void;
   render(): VNode;
   private activeFocus;
   /**
@@ -122,11 +122,18 @@ export declare class DatePickerMonth {
   /**
    * Render calcite-date-picker-day
    *
+   * @param active.active
    * @param active
    * @param day
+   * @param dayInWeek
    * @param date
    * @param currentMonth
    * @param ref
+   * @param active.currentMonth
+   * @param active.date
+   * @param active.day
+   * @param active.dayInWeek
+   * @param active.ref
    */
   private renderDateDay;
   private isFocusedOnStart;

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

@@ -39,7 +39,6 @@ export declare class DatePickerMonthHeader {
   connectedCallback(): void;
   render(): VNode;
   renderContent(): VNode;
-  globalAttributes: {};
   private yearInput;
   private parentDatePickerEl;
   nextMonthDate: Date;

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

@@ -102,8 +102,8 @@ export declare class Dropdown implements InteractiveComponent, LoadableComponent
   closeCalciteDropdownOnClick(event: PointerEvent): void;
   closeCalciteDropdownOnEvent(event: Event): void;
   closeCalciteDropdownOnOpenEvent(event: Event): void;
-  mouseEnterHandler(): void;
-  mouseLeaveHandler(): void;
+  pointerEnterHandler(): void;
+  pointerLeaveHandler(): void;
   calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void;
   handleItemSelect(event: CustomEvent<RequestedItem>): void;
   filteredFlipPlacements: EffectivePlacement[];

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

@@ -192,6 +192,12 @@ 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";
   /** The component's value. */
   value: string;
+  /**
+   * When `type` is `"file"`, specifies the component's selected files.
+   *
+   * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
+   */
+  files: FileList | undefined;
   /**
    * Made into a prop for testing purposes only
    *
@@ -227,9 +233,9 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   private nudgeNumberValueIntervalId;
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   private userChangedValue;
+  defaultMessages: InputMessages;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
-  defaultMessages: InputMessages;
   localizedValue: string;
   slottedActionElDisabledInternally: boolean;
   connectedCallback(): void;
@@ -268,6 +274,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   private inputBlurHandler;
   private clickHandler;
   private inputFocusHandler;
+  private inputChangeHandler;
   private inputInputHandler;
   private inputKeyDownHandler;
   private inputNumberInputHandler;

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

@@ -0,0 +1,3 @@
+export type InputDatePickerMessages = {
+  chooseDate: string;
+};

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

@@ -8,12 +8,21 @@ import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { DatePickerMessages } from "../date-picker/assets/date-picker/t9n";
 import { HeadingLevel } from "../functional/Heading";
-export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LocalizedComponent, LoadableComponent {
+import { T9nComponent } from "../../utils/t9n";
+import { InputDatePickerMessages } from "./assets/input-date-picker/t9n";
+import { FocusTrapComponent } from "../../utils/focusTrapComponent";
+import { FocusTrap } from "focus-trap";
+export declare class InputDatePicker implements FloatingUIComponent, FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent, LocalizedComponent, OpenCloseComponent, T9nComponent {
   el: HTMLCalciteInputDatePickerElement;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * When `true`, prevents focus trapping.
+   */
+  focusTrapDisabled: boolean;
+  handleFocusTrapDisabled(focusTrapDisabled: boolean): void;
   /**
    * The ID of the form that will be associated with the component.
    *
@@ -42,6 +51,17 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   headingLevel: HeadingLevel;
   /** The component's value as a full date object. */
   valueAsDate: Date | Date[];
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<InputDatePickerMessages & DatePickerMessages>;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: InputDatePickerMessages;
+  onMessagesChange(): void;
   /** Specifies the earliest allowed date as a full date object. */
   minAsDate: Date;
   /** Specifies the latest allowed date as a full date object. */
@@ -99,10 +119,6 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   proximitySelectionDisabled: boolean;
   /** Defines the layout of the component. */
   layout: "horizontal" | "vertical";
-  /**
-   * Use this property to override individual strings used by the component.
-   */
-  messageOverrides: Partial<DatePickerMessages>;
   calciteDaySelectHandler(): void;
   private calciteInternalInputInputHandler;
   private calciteInternalInputBlurHandler;
@@ -132,14 +148,20 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;
+  renderToggleIcon(open: boolean): VNode;
+  private datePickerEl;
+  private dialogId;
   filteredFlipPlacements: EffectivePlacement[];
+  private focusOnOpen;
+  focusTrap: FocusTrap;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: InputDatePicker["value"];
   datePickerActiveDate: Date;
+  defaultMessages: InputDatePickerMessages;
   effectiveLocale: string;
   focusedInput: "start" | "end";
-  globalAttributes: {};
+  private lastBlurredInput;
   private localeData;
   private startInput;
   private endInput;
@@ -152,6 +174,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   transitionEl: HTMLDivElement;
   setReferenceEl(): void;
   private valueAsDateChangedExternally;
+  private onInputWrapperClick;
   setFilteredPlacements: () => void;
   private setTransitionEl;
   onLabelClick(): void;
@@ -165,10 +188,12 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private commitValue;
   keyDownHandler: (event: KeyboardEvent) => void;
   startInputFocus: () => void;
+  startEndInputFocus: (event: FocusEvent) => void;
   endInputFocus: () => void;
   setFloatingEl: (el: HTMLDivElement) => void;
   setStartWrapper: (el: HTMLDivElement) => void;
   setEndWrapper: (el: HTMLDivElement) => void;
+  setDatePickerRef: (el: HTMLCalciteDatePickerElement) => void;
   private loadLocaleData;
   /**
    * Event handler for when the selected date changes
@@ -179,6 +204,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private shouldFocusRangeStart;
   private shouldFocusRangeEnd;
   private handleDateRangeChange;
+  private restoreInputFocus;
   private localizeInputValues;
   private setInputValue;
   private setRangeValue;

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

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

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

@@ -0,0 +1,3 @@
+export type InputTimePickerMessages = {
+  chooseTime: string;
+};