@esri/calcite-components 1.3.0-next.1 → 1.3.0-next.11

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": {
@@ -3653,6 +3715,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 +3741,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 +4907,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.1
+ * v1.3.0-next.11
  */
 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.1
+ * v1.3.0-next.11
  */
 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.1
+ * v1.3.0-next.11
  */
 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.1
+ * v1.3.0-next.11
  */
 (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/action-bar/action-bar.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent } from "../../utils/locale";
@@ -25,6 +25,7 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
    *  The layout direction of the actions.
    */
   layout: Extract<"horizontal" | "vertical", Layout>;
+  layoutHandler(): void;
   /**
    * Disables automatically overflowing `calcite-action`s that won't fit into menus.
    */
@@ -81,6 +82,9 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
   conditionallyOverflowActions: () => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  updateGroups(): void;
+  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void;
+  handleDefaultSlotChange: (event: Event) => void;
   renderBottomActionGroup(): VNode;
   render(): VNode;
 }

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

@@ -19,6 +19,8 @@ export declare class ActionGroup implements ConditionalSlotComponent, LoadableCo
   expandedHandler(): void;
   /**
    * Indicates the layout of the component.
+   *
+   * @deprecated Use the `layout` property on the component's parent instead.
    */
   layout: Layout;
   /**

package/dist/types/components/action-pad/action-pad.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent } from "../../utils/locale";
@@ -23,6 +23,7 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
    * Indicates the layout of the component.
    */
   layout: Layout;
+  layoutHandler(): void;
   /**
    * Arranges the component depending on the element's `dir` property.
    */
@@ -47,6 +48,7 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
    */
   calciteActionPadToggle: EventEmitter<void>;
   el: HTMLCalciteActionPadElement;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   expandToggleEl: HTMLCalciteActionElement;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
@@ -62,6 +64,9 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
   actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  updateGroups(): void;
+  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void;
+  handleDefaultSlotChange: (event: Event) => void;
   renderBottomActionGroup(): VNode;
   render(): VNode;
 }

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

@@ -35,7 +35,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;
   /**

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

@@ -227,9 +227,10 @@ 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;
+  globalAttributes: {};
   localizedValue: string;
   slottedActionElDisabledInternally: boolean;
   connectedCallback(): void;

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,7 +8,9 @@ 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";
+export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LocalizedComponent, LoadableComponent, T9nComponent {
   el: HTMLCalciteInputDatePickerElement;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -42,6 +44,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 +112,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 +141,17 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;
+  renderToggleIcon(open: boolean): VNode;
+  private dialogId;
   filteredFlipPlacements: EffectivePlacement[];
   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 +164,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   transitionEl: HTMLDivElement;
   setReferenceEl(): void;
   private valueAsDateChangedExternally;
+  private onInputWrapperClick;
   setFilteredPlacements: () => void;
   private setTransitionEl;
   onLabelClick(): void;
@@ -165,6 +178,7 @@ 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;

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

@@ -75,6 +75,7 @@ export declare class List implements InteractiveComponent, LoadableComponent {
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
   handleCalciteListItemActive(event: CustomEvent): void;
   handleCalciteListItemSelect(event: CustomEvent): void;
+  handleCalciteListItemClose(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;

package/dist/types/components/list-item/assets/list-item/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type ListItemMessages = {
+  close: string;
+};