@esri/calcite-components 1.0.0-next.573 → 1.0.0-next.576

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-next.573
+ * v1.0.0-next.576
  */
 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-next.573
+ * v1.0.0-next.576
  */
 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-next.573
+ * v1.0.0-next.576
  */
 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-next.573
+ * v1.0.0-next.576
  */
 (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/interfaces.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionAppearance = "default" | "minimal" | "transparent";
+export declare type AccordionAppearance = "default" | "minimal" | "transparent" | "solid";
 export interface RequestedItem {
   requestedAccordionItem: HTMLCalciteAccordionItemElement;
 }

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

@@ -1,4 +1,4 @@
 export declare type ButtonColor = "blue" | "inverse" | "neutral" | "red";
-export declare type ButtonAppearance = "solid" | "outline" | "clear" | "transparent";
+export declare type ButtonAppearance = "solid" | "outline" | "clear" | "transparent" | "minimal";
 export declare type ButtonAlignment = "start" | "end" | "center" | "space-between" | "icon-start-space-between" | "icon-end-space-between";
 export declare type DropdownIconType = "chevron" | "caret" | "ellipsis" | "overflow";

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

@@ -12,7 +12,7 @@ export declare class ColorPicker implements InteractiveComponent {
    * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
    */
   allowEmpty: boolean;
-  /** specify the appearance - default (containing border), or minimal (no containing border) */
+  /** specify the appearance - solid (containing border), or minimal (no containing border) */
   appearance: ColorAppearance;
   /**
    * Internal prop for advanced use-cases.

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

@@ -1,5 +1,5 @@
 import type Color from "color";
-export declare type ColorAppearance = "default" | "minimal";
+export declare type ColorAppearance = "default" | "minimal" | "solid";
 export declare type ColorMode = "rgb" | "hsv";
 export declare type InternalColor = Color;
 export declare type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;

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

@@ -1,22 +1,22 @@
 import { VNode } from "../../stencil-public-runtime";
 import { FlowDirection } from "./interfaces";
 /**
- * @slot - A slot for adding `calcite-panel`s to the flow.
+ * @slot - A slot for adding `calcite-flow-item` or `calcite-panel`s (deprecated) to the flow.
  */
 export declare class Flow {
   /**
-   * Removes the currently active `calcite-panel`.
+   * Removes the currently active `calcite-flow-item` or `calcite-panel`.
    */
-  back(): Promise<HTMLCalcitePanelElement>;
+  back(): Promise<HTMLCalciteFlowItemElement>;
   el: HTMLCalciteFlowElement;
-  panelCount: number;
   flowDirection: FlowDirection;
-  panels: HTMLCalcitePanelElement[];
-  panelItemMutationObserver: MutationObserver;
+  itemCount: number;
+  items: HTMLCalciteFlowItemElement[];
+  itemMutationObserver: MutationObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  handleCalcitePanelBackClick(): void;
-  getFlowDirection: (oldPanelCount: number, newPanelCount: number) => FlowDirection | null;
+  handleItemBackClick(): void;
+  getFlowDirection: (oldFlowItemCount: number, newFlowItemCount: number) => FlowDirection | null;
   updateFlowProps: () => void;
   render(): VNode;
 }

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

@@ -0,0 +1,100 @@
+import { VNode, EventEmitter } from "../../stencil-public-runtime";
+import { HeadingLevel } from "../functional/Heading";
+import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding custom content.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
+ * @slot header-content - A slot for adding custom content to the header.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer - A slot for adding custom content to the footer.
+ */
+export declare class FlowItem implements InteractiveComponent {
+  /** When true, displays a close button in the trailing side of the header */
+  closable: boolean;
+  /** When true, flow-item will be hidden */
+  closed: boolean;
+  /**
+   * When provided, this method will be called before it is removed from the parent flow.
+   */
+  beforeBack?: () => Promise<void>;
+  /** A description for the component. */
+  description: string;
+  /**
+   *  When true, interaction is prevented and the component is displayed with lower opacity.
+   */
+  disabled: boolean;
+  /**
+   * The component header text.
+   */
+  heading?: string;
+  /**
+   * Specifies the number at which section headings should start.
+   */
+  headingLevel: HeadingLevel;
+  /**
+   * Specifies the maximum height of the component.
+   */
+  heightScale?: Scale;
+  /**
+   * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+   */
+  intlBack?: string;
+  /**
+   * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
+   */
+  intlClose?: string;
+  /**
+   * Accessible name for the component's actions menu.
+   */
+  intlOptions?: string;
+  /**
+   * When true, a busy indicator is displayed.
+   */
+  loading: boolean;
+  /**
+   * When true, the action menu items in the `header-menu-actions` slot are open.
+   */
+  menuOpen: boolean;
+  /**
+   * When true, displays a back button in the header.
+   */
+  showBackButton: boolean;
+  /**
+   * Specifies the width of the component.
+   */
+  widthScale?: Scale;
+  componentDidRender(): void;
+  /**
+   * Fires when the back button is clicked.
+   */
+  calciteFlowItemBackClick: EventEmitter<void>;
+  el: HTMLCalciteFlowItemElement;
+  containerEl: HTMLCalcitePanelElement;
+  backButtonEl: HTMLCalciteActionElement;
+  /**
+   * Sets focus on the component.
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
+   *
+   * ```
+   *   myCalciteFlowItem.scrollContentTo({
+   *     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   *   });
+   * ```
+   *
+   * @param options
+   */
+  scrollContentTo(options?: ScrollToOptions): Promise<void>;
+  backButtonClick: () => void;
+  setBackRef: (node: HTMLCalciteActionElement) => void;
+  renderBackButton(): VNode;
+  render(): VNode;
+}

package/dist/types/components/flow-item/resources.d.ts

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  backButton: string;
+};
+export declare const ICONS: {
+  backLeft: string;
+  backRight: string;
+};
+export declare const TEXT: {
+  back: string;
+};
+export declare const SLOTS: {
+  headerActionsStart: string;
+  headerActionsEnd: string;
+  headerMenuActions: string;
+  headerContent: string;
+  fab: string;
+  footer: string;
+  footerActions: string;
+};

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

@@ -6,9 +6,16 @@ import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteInputTimePickerElement;
-  /** The active state of the time input */
+  /**
+   * The active state of the time input
+   *
+   * @deprecated Use open instead.
+   */
   active: boolean;
-  activeHandler(): void;
+  activeHandler(value: boolean): void;
+  /** When true, displays the `calcite-time-picker` component.*/
+  open: boolean;
+  openHandler(value: boolean): void;
   /** The disabled state of the time input */
   disabled: boolean;
   /**

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

@@ -1,5 +1,5 @@
 export declare type Alignment = "start" | "center" | "end";
-export declare type Appearance = "solid" | "clear" | "outline";
+export declare type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal";
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export declare type FlipContext = "both" | "start" | "end";
 export declare type Layout = "horizontal" | "vertical" | "grid";

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

@@ -61,6 +61,12 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   hasFooter: boolean;
   closeButtonEl: HTMLButtonElement;
   contentId: string;
+  /**
+   * We use internal variable to make sure initially open modal can transition from closed state when rendered
+   *
+   * @private
+   */
+  isOpen: boolean;
   modalContent: HTMLDivElement;
   private mutationObserver;
   previousActiveElement: HTMLElement;

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

@@ -1,5 +1,6 @@
 export declare const CSS: {
   modal: string;
+  modalOpen: string;
   title: string;
   header: string;
   footer: string;

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

@@ -1,7 +1,6 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
-import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
@@ -13,7 +12,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
+export declare class Panel implements InteractiveComponent {
   /**
    * When true, hides the component.
    *
@@ -26,6 +25,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   closedHandler(value: boolean): void;
   /**
    * When provided, this method will be called before it is removed from the parent flow.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   beforeBack?: () => Promise<void>;
   /**
@@ -48,10 +49,14 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   headingLevel: HeadingLevel;
   /**
    * When true, displays a back button in the header.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   showBackButton: boolean;
   /**
    * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   intlBack?: string;
   /**
@@ -97,6 +102,13 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
+  hasStartActions: boolean;
+  hasEndActions: boolean;
+  hasMenuItems: boolean;
+  hasHeaderContent: boolean;
+  hasFooterContent: boolean;
+  hasFooterActions: boolean;
+  hasFab: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
@@ -115,6 +127,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   calcitePanelScroll: EventEmitter<void>;
   /**
    * Fires when the back button is clicked.
+   *
+   * @deprecated use `calcite-flow-item` instead.
    */
   calcitePanelBackClick: EventEmitter<void>;
   resizeHandler: () => void;
@@ -125,12 +139,19 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   close: () => void;
   panelScrollHandler: () => void;
   backButtonClick: () => void;
+  handleHeaderActionsStartSlotChange: (event: Event) => void;
+  handleHeaderActionsEndSlotChange: (event: Event) => void;
+  handleHeaderMenuActionsSlotChange: (event: Event) => void;
+  handleHeaderContentSlotChange: (event: Event) => void;
+  handleFooterSlotChange: (event: Event) => void;
+  handleFooterActionsSlotChange: (event: Event) => void;
+  handleFabSlotChange: (event: Event) => void;
   /**
    * Sets focus on the component.
    *
    * @param focusId
    */
-  setFocus(focusId?: "dismiss-button" | "back-button"): Promise<void>;
+  setFocus(focusId?: "back-button" | "dismiss-button"): Promise<void>;
   /**
    * Scrolls the component's content to a specified set of coordinates.
    *

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

@@ -14,10 +14,6 @@ export declare const CSS: {
   contentHeight: string;
   fabContainer: string;
   footer: string;
-  menuContainer: string;
-  menuButton: string;
-  menu: string;
-  menuOpen: string;
 };
 export declare const ICONS: {
   close: string;

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

@@ -2,24 +2,29 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { TabChangeEventDetail } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot - A slot for adding custom content.
+ * @slot - A slot for adding content to the component.
  */
 export declare class Tab {
   el: HTMLCalciteTabElement;
   /**
-   * Optionally include a unique name for this tab,
-   * be sure to also set this name on the associated title.
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab-title`.
    */
-  tab: string;
+  tab?: string;
   /**
-   * Show this tab
+   * When true, the component's contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    *
-   * @deprecated Use selected instead.
+   * @deprecated Use "selected" instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * When true, display this tab.
+   * When true, the component's contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
@@ -38,7 +43,7 @@ export declare class Tab {
   calciteInternalTabRegister: EventEmitter<void>;
   internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   /**
-   * Return the index of this tab within the tab array
+   * Returns the index of the component item within the tab array.
    */
   getTabIndex(): Promise<number>;
   parentTabsEl: HTMLCalciteTabsElement;

package/dist/types/components/tab-nav/tab-nav.d.ts

@@ -9,11 +9,11 @@ import { Scale } from "../interfaces";
 export declare class TabNav {
   el: HTMLCalciteTabNavElement;
   /**
-   * Name to use when saving selected tab data to localStorage
+   * Specifies the name when saving selected `calcite-tab` data to `localStorage`.
    */
   storageId: string;
   /**
-   * Pass the same string to multiple tab navs to keep them all in sync if one changes
+   * Specifies text to update multiple components to keep in sync if one changes.
    */
   syncId: string;
   /**
@@ -60,7 +60,7 @@ export declare class TabNav {
   updateTabTitles(event: CustomEvent<TabID>): void;
   globalInternalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   /**
-   * Emitted when the active tab changes
+   * Emits when the selected `calcite-tab` changes.
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */

package/dist/types/components/tab-title/tab-title.d.ts

@@ -9,24 +9,28 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class TabTitle implements InteractiveComponent {
   el: HTMLCalciteTabTitleElement;
   /**
-   * Show this tab title as selected
+   * When true, the component and its respective `calcite-tab` contents are selected.
    *
-   * @deprecated Use selected instead.
+   * Only one tab can be selected within the `calcite-tabs` parent.
+   *
+   * @deprecated Use "selected" instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * When true, display this tab title as selected.
+   * When true, the component and its respective `calcite-tab` contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
-  /** Disable this tab title  */
+  /** When true, interaction is prevented and the component is displayed with lower opacity.  */
   disabled: boolean;
-  /** optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the end of the component - accepts Calcite UI icon names.  */
   iconEnd?: string;
-  /** flip the icon(s) in rtl */
+  /** When true, the icon will be flipped when the element direction is right-to-left ("rtl"). */
   iconFlipRtl?: FlipContext;
-  /** optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the start of the component - accepts Calcite UI icon names.  */
   iconStart?: string;
   /**
    * @internal
@@ -45,8 +49,9 @@ export declare class TabTitle implements InteractiveComponent {
    */
   bordered: boolean;
   /**
-   * Optionally include a unique name for the tab title,
-   * be sure to also set this name on the associated tab.
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab`.
    */
   tab?: string;
   connectedCallback(): void;
@@ -60,13 +65,13 @@ export declare class TabTitle implements InteractiveComponent {
   onClick(): void;
   keyDownHandler(event: KeyboardEvent): void;
   /**
-   * Fires when a specific tab is activated. Emits the "tab" property or the index position.
+   * Fires when a `calcite-tab` is selected. Emits the "tab" property, or the index position.
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
   /**
-   * Fires when a specific tab is activated (`event.details`)
+   * Fires when a `calcite-tab` is selected (`event.details`).
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    * @internal
@@ -85,7 +90,7 @@ export declare class TabTitle implements InteractiveComponent {
    */
   calciteInternalTabTitleRegister: EventEmitter<TabID>;
   /**
-   * Return the index of this title within the nav
+   * Returns the index of the title within the `calcite-tab-nav`.
    */
   getTabIndex(): Promise<number>;
   /**

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

@@ -3,25 +3,25 @@ import { TabLayout, TabPosition } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-tab`s.
- * @slot tab-nav - A slot for adding a tab navigation component.
+ * @slot tab-nav - A slot for adding a `calcite-tab-nav`.
  */
 export declare class Tabs {
   el: HTMLCalciteTabsElement;
   /**
-   * Align tab titles to the edge or fully justify them across the tab nav ("center")
+   * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
    */
   layout: TabLayout;
   /**
-   * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+   * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
    *
    */
   position: TabPosition;
   /**
-   * Specify the scale of the tabs component, defaults to m
+   * Specifies the size of the component.
    */
   scale: Scale;
   /**
-   * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+   * When true and layout is set to "inline", the component will display with a folder style menu.
    */
   bordered: boolean;
   connectedCallback(): void;

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

@@ -2,34 +2,42 @@ import { VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
- * @slot content-start - A slot for adding non-actionable elements before the tile content.
- * @slot content-end - A slot for adding non-actionable elements after the tile content.
+ * @slot content-start - A slot for adding non-actionable elements before the component's content.
+ * @slot content-end - A slot for adding non-actionable elements after the component's content.
  */
 export declare class Tile implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTileElement;
-  /** The active state of the tile. */
+  /**
+   * When true, the component is active.
+   */
   active: boolean;
-  /** The description text that appears beneath the heading of the tile. */
+  /**
+   * A description for the component, which displays below the heading.
+   */
   description?: string;
   /**
-   * When true, prevents interaction.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
-  /** The embed mode of the tile.  When true, renders without a border and padding for use by other components. */
+  /**
+   * The component's embed mode.
+   *
+   * When true, renders without a border and padding for use by other components.
+   */
   embed: boolean;
   /**
-   * The focused state of the tile.
+   * The focused state of the component.
    *
    * @internal
    */
   focused: boolean;
-  /** The heading text that appears between the icon and description of the tile. */
+  /** The component header text, which displays between the icon and description. */
   heading?: string;
-  /** The hidden state of the tile. */
+  /** When true, the component is not displayed and is not focusable.  */
   hidden: boolean;
-  /** The (optional) url for the tile. (Only applies when embed is set to false) */
+  /** When embed is "false", the url for the component. */
   href?: string;
-  /** The icon that appears at the top of the tile. */
+  /** Specifies an icon to display. */
   icon?: string;
   connectedCallback(): void;
   disconnectedCallback(): void;