@esri/calcite-components 1.0.0-beta.98 → 1.0.0-beta.99

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.0.0-beta.98
+ * v1.0.0-beta.99
  */
 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.0.0-beta.98
+ * v1.0.0-beta.99
  */
 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.0.0-beta.98
+ * v1.0.0-beta.99
  */
 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.0.0-beta.98
+ * v1.0.0-beta.99
  */
 (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/accordion/accordion.d.ts

@@ -1,13 +1,14 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { AccordionAppearance, AccordionSelectionMode, RequestedItem } from "./interfaces";
-import { Position, Scale } from "../interfaces";
+import { RequestedItem } from "./interfaces";
+import { Appearance, Position, Scale } from "../interfaces";
+import { SelectionMode } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
 export declare class Accordion {
   el: HTMLCalciteAccordionElement;
   /** Specifies the appearance of the component. */
-  appearance: AccordionAppearance;
+  appearance: Extract<"default" | "minimal" | "solid" | "transparent", Appearance>;
   /** Specifies the placement of the icon in the header. */
   iconPosition: Position;
   /** Specifies the type of the icon in the header. */
@@ -15,17 +16,16 @@ export declare class Accordion {
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * Specifies the selection mode - "multiple" (allow any number of open items), "single" (allow one open item),
-   * or "single-persist" (allow and require one open item).
+   * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item),
+   * or `"single-persist"` (allow and require one open item).
    */
-  selectionMode: AccordionSelectionMode;
+  selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
   /**
    * @internal
    */
   calciteInternalAccordionChange: EventEmitter<RequestedItem>;
   componentDidLoad(): void;
   render(): VNode;
-  calciteInternalAccordionItemKeyEvent(event: CustomEvent): void;
   registerCalciteAccordionItem(event: CustomEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
   /** created list of Accordion items */
@@ -34,11 +34,5 @@ export declare class Accordion {
   private sorted;
   /** keep track of the requested item for multi mode */
   private requestedAccordionItem;
-  private focusFirstItem;
-  private focusLastItem;
-  private focusNextItem;
-  private focusPrevItem;
-  private itemIndex;
-  private focusElement;
   private sortItems;
 }

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

@@ -1,5 +1,3 @@
-export declare type AccordionAppearance = "default" | "minimal" | "transparent" | "solid";
 export interface RequestedItem {
   requestedAccordionItem: HTMLCalciteAccordionItemElement;
 }
-export declare type AccordionSelectionMode = "multi" | "single" | "single-persist" | "multiple";

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

@@ -1,53 +1,24 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { ItemKeyEvent, RegistryEntry, RequestedItem } from "./interfaces";
+import { FlipContext } from "../interfaces";
+import { RegistryEntry, RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  */
 export declare class AccordionItem implements ConditionalSlotComponent {
   el: HTMLCalciteAccordionItemElement;
-  /**
-   * When `true`, the component is active.
-   *
-   * @deprecated use `expanded` instead.
-   */
-  active: boolean;
-  activeHandler(value: boolean): void;
   /** When `true`, the component is expanded. */
   expanded: boolean;
-  expandedHandler(value: boolean): void;
-  /**
-   * Specifies a title for the component.
-   *
-   * @deprecated Use `heading` instead.
-   */
-  itemTitle?: string;
-  /**
-   * Specifies a subtitle for the component.
-   *
-   * @deprecated Use `description` instead.
-   */
-  itemSubtitle?: string;
   /** Specifies heading text for the component. */
-  heading?: string;
+  heading: string;
   /** Specifies a description for the component. */
   description: string;
-  /**
-   * Specifies an icon to display.
-   *
-   * @deprecated use `iconStart` or `iconEnd` instead.
-   */
-  icon?: string;
-  iconHandler(value: string): void;
   /** Specifies an icon to display at the start of the component. */
-  iconStart?: string;
-  iconStartHandler(value: string): void;
+  iconStart: string;
   /** Specifies an icon to display at the end of the component. */
-  iconEnd?: string;
-  /**
-   * @internal
-   */
-  calciteInternalAccordionItemKeyEvent: EventEmitter<ItemKeyEvent>;
+  iconEnd: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: FlipContext;
   /**
    * @internal
    */

package/dist/types/components/accordion-item/interfaces.d.ts

@@ -2,10 +2,6 @@ export interface RegistryEntry {
   parent: HTMLCalciteAccordionElement;
   position: number;
 }
-export interface ItemKeyEvent {
-  parent: HTMLCalciteAccordionElement;
-  item: KeyboardEvent;
-}
 export interface RequestedItem {
   requestedAccordionItem: HTMLCalciteAccordionItemElement;
 }

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

@@ -1,10 +1,14 @@
-import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
+import { VNode } from "../../stencil-public-runtime";
 import { Alignment, Appearance, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LocalizedComponent } from "../../utils/locale";
+import { ActionMessages } from "./assets/action/t9n";
+import { T9nComponent } from "../../utils/t9n";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
-export declare class Action implements InteractiveComponent {
+export declare class Action implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent {
   /**
    * When `true`, the component is highlighted.
    */
@@ -12,9 +16,9 @@ export declare class Action implements InteractiveComponent {
   /**
    * Specifies the horizontal alignment of button elements with text content.
    */
-  alignment?: Alignment;
+  alignment: Alignment;
   /** Specifies the appearance of the component. */
-  appearance: Extract<"solid" | "clear", Appearance>;
+  appearance: Extract<"solid" | "transparent", Appearance>;
   /**
    * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
    */
@@ -24,21 +28,17 @@ export declare class Action implements InteractiveComponent {
    */
   disabled: boolean;
   /** Specifies an icon to display. */
-  icon?: string;
+  icon: string;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: boolean;
   /**
-   * When `true`, indicates unread changes.
+   * When `true`, displays a visual indicator.
    */
   indicator: boolean;
-  /**
-   * Specifies the text label to display while loading.
-   *
-   * @default "Loading"
-   */
-  intlLoading?: string;
   /**
    * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
    */
-  label?: string;
+  label: string;
   /**
    * When `true`, a busy indicator is displayed.
    */
@@ -56,22 +56,35 @@ export declare class Action implements InteractiveComponent {
    */
   textEnabled: boolean;
   /**
-   * Emits when the component has been clicked.
+   * Made into a prop for testing purposes only
    *
-   * @deprecated use `onClick` instead.
+   * @internal
+   */
+  messages: ActionMessages;
+  /**
+   * Use this property to override individual strings used by the component.
    */
-  calciteActionClick: EventEmitter<void>;
+  messageOverrides: Partial<ActionMessages>;
+  onMessagesChange(): void;
   el: HTMLCalciteActionElement;
   buttonEl: HTMLButtonElement;
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: ActionMessages;
+  guid: string;
+  indicatorId: string;
+  buttonId: string;
   connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   renderTextContainer(): VNode;
+  renderIndicatorText(): VNode;
   renderIconContainer(): VNode;
   render(): VNode;
   handleTooltipSlotChange: (event: Event) => void;
-  calciteActionClickHandler: () => void;
 }

package/dist/types/components/action/assets/action/t9n/index.d.ts

@@ -1,3 +1,4 @@
-export type Messages = {
+export type ActionMessages = {
   loading: string;
+  indicator: string;
 };

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

@@ -2,15 +2,13 @@ export declare const CSS: {
   button: string;
   buttonTextVisible: string;
   buttonCompact: string;
+  indicatorText: string;
   iconContainer: string;
   slotContainer: string;
   slotContainerHidden: string;
   textContainer: string;
   textContainerVisible: string;
 };
-export declare const TEXT: {
-  loading: string;
-};
 export declare const SLOTS: {
   tooltip: string;
 };

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

@@ -1,12 +1,16 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Position, Scale, Layout } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { ActionBarMessages } from "./assets/action-bar/t9n";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
  * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
  */
-export declare class ActionBar implements ConditionalSlotComponent {
+export declare class ActionBar implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -17,14 +21,6 @@ export declare class ActionBar implements ConditionalSlotComponent {
    */
   expanded: boolean;
   expandedHandler(expanded: boolean): void;
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   */
-  intlExpand?: string;
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   */
-  intlCollapse?: string;
   /**
    *  The layout direction of the actions.
    */
@@ -42,6 +38,17 @@ export declare class ActionBar implements ConditionalSlotComponent {
    * Specifies the size of the expand `calcite-action`.
    */
   scale: Scale;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: ActionBarMessages;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<ActionBarMessages>;
+  onMessagesChange(): void;
   /**
    * Emits when the `expanded` property is toggled.
    */
@@ -50,8 +57,12 @@ export declare class ActionBar implements ConditionalSlotComponent {
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   resizeObserver: ResizeObserver;
   expandToggleEl: HTMLCalciteActionElement;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: ActionBarMessages;
   componentDidLoad(): void;
   connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
   disconnectedCallback(): void;
   /**
    * Overflows actions that won't fit into menus.
@@ -61,11 +72,9 @@ export declare class ActionBar implements ConditionalSlotComponent {
   overflowActions(): Promise<void>;
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  setFocus(focusId?: "expand-toggle"): Promise<void>;
-  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  setFocus(): Promise<void>;
+  actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;
   resizeHandler: (entry: ResizeObserverEntry) => void;
   private resize;

package/dist/types/components/action-bar/assets/action-bar/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type ActionBarMessages = {
   expand: string;
   collapse: string;
 };

package/dist/types/components/action-bar/resources.d.ts

@@ -5,7 +5,3 @@ export declare const SLOTS: {
   bottomActions: string;
   expandTooltip: string;
 };
-export declare const TEXT: {
-  expand: string;
-  collapse: string;
-};

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

@@ -2,12 +2,15 @@ import { VNode } from "../../stencil-public-runtime";
 import { Columns, Layout, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { CalciteActionMenuCustomEvent } from "../../components";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { ActionGroupMessages } from "./assets/action-group/t9n";
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
  * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
-export declare class ActionGroup implements ConditionalSlotComponent {
+export declare class ActionGroup implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
   /**
    * When `true`, the component is expanded.
    */
@@ -20,11 +23,7 @@ export declare class ActionGroup implements ConditionalSlotComponent {
   /**
    * Indicates number of columns.
    */
-  columns?: Columns;
-  /**
-   * Specifies a text string for the `calcite-action-menu`.
-   */
-  intlMore?: string;
+  columns: Columns;
   /**
    * When `true`, the `calcite-action-menu` is open.
    */
@@ -33,11 +32,26 @@ export declare class ActionGroup implements ConditionalSlotComponent {
    * Specifies the size of the `calcite-action-menu`.
    */
   scale: Scale;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: ActionGroupMessages;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<ActionGroupMessages>;
+  onMessagesChange(): void;
   el: HTMLCalciteActionGroupElement;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: ActionGroupMessages;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
   renderTooltip(): VNode;
   renderMenu(): VNode;
   render(): VNode;
-  setMenuOpen: (event: CalciteActionMenuCustomEvent<boolean>) => void;
+  setMenuOpen: (event: CalciteActionMenuCustomEvent<void>) => void;
 }

package/dist/types/components/action-group/assets/action-group/t9n/index.d.ts

@@ -1,3 +1,3 @@
-export type Messages = {
+export type ActionGroupMessages = {
   more: string;
 };

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

@@ -2,9 +2,6 @@ export declare const SLOTS: {
   menuActions: string;
   menuTooltip: string;
 };
-export declare const TEXT: {
-  more: string;
-};
 export declare const ICONS: {
   menu: string;
 };

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

@@ -1,13 +1,16 @@
 import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
-import { DeprecatedEventPayload, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import { LogicalPlacement, EffectivePlacement, OverlayPositioning } from "../../utils/floating-ui";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-action`s.
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot tooltip - A slot for adding an tooltip for the menu.
  */
-export declare class ActionMenu {
+export declare class ActionMenu implements LoadableComponent {
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   /**
    * When `true`, the component is expanded.
@@ -17,7 +20,7 @@ export declare class ActionMenu {
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: EffectivePlacement[];
+  flipPlacements: EffectivePlacement[];
   /**
    *  Specifies the text string for the component.
    */
@@ -37,8 +40,6 @@ export declare class ActionMenu {
   overlayPositioning: OverlayPositioning;
   /**
    * Determines where the component will be positioned relative to the `referenceElement`.
-   *
-   * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
    */
   placement: LogicalPlacement;
   /**
@@ -46,11 +47,10 @@ export declare class ActionMenu {
    */
   scale: Scale;
   /**
-   * Emits when the `open` property has changed.
+   * Emits when the `open` property is toggled.
    *
-   * **Note:**: The event payload is deprecated, please use the `open` property on the component instead
    */
-  calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
+  calciteActionMenuOpen: EventEmitter<void>;
   closeCalciteActionMenuOnClick(event: PointerEvent): void;
   el: HTMLCalciteActionMenuElement;
   menuButtonEl: HTMLCalciteActionElement;

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

@@ -1,11 +1,15 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Position, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { ActionPadMessages } from "./assets/action-pad/t9n";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-action`s to the component.
  * @slot expand-tooltip - Used to set the `calcite-tooltip` for the expand toggle.
  */
-export declare class ActionPad implements ConditionalSlotComponent {
+export declare class ActionPad implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -19,14 +23,6 @@ export declare class ActionPad implements ConditionalSlotComponent {
    * Indicates the layout of the component.
    */
   layout: Layout;
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   */
-  intlExpand?: string;
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   */
-  intlCollapse?: string;
   /**
    * Arranges the component depending on the element's `dir` property.
    */
@@ -35,22 +31,35 @@ export declare class ActionPad implements ConditionalSlotComponent {
    * Specifies the size of the expand `calcite-action`.
    */
   scale: Scale;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: ActionPadMessages;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<ActionPadMessages>;
+  onMessagesChange(): void;
   /**
    * Emits when the `expanded` property is toggled.
    */
   calciteActionPadToggle: EventEmitter<void>;
   el: HTMLCalciteActionPadElement;
   expandToggleEl: HTMLCalciteActionElement;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  defaultMessages: ActionPadMessages;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  componentWillLoad(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   /**
    * Sets focus on the component.
-   *
-   * @param focusId
    */
-  setFocus(focusId?: "expand-toggle"): Promise<void>;
-  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  setFocus(): Promise<void>;
+  actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
   renderBottomActionGroup(): VNode;

package/dist/types/components/action-pad/assets/action-pad/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type ActionPadMessages = {
   expand: string;
   collapse: string;
 };

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

@@ -2,10 +2,6 @@ export declare const CSS: {
   actionGroupBottom: string;
   container: string;
 };
-export declare const TEXT: {
-  expand: string;
-  collapse: string;
-};
 export declare const SLOTS: {
   expandTooltip: string;
 };