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

package/dist/extras/vscode-data.json

@@ -352,6 +352,18 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "appearance",
+          "description": "Specifies the appearance of the component.",
+          "values": [
+            {
+              "name": "solid"
+            },
+            {
+              "name": "transparent"
+            }
+          ]
+        },
         {
           "name": "expanded",
           "description": "When `true`, the component is expanded."
@@ -2307,6 +2319,14 @@
           "name": "closed",
           "description": "When `true`, the component will be hidden."
         },
+        {
+          "name": "collapsed",
+          "description": "When `true`, hides the component's content area."
+        },
+        {
+          "name": "collapsible",
+          "description": "When `true`, the component is collapsible."
+        },
         {
           "name": "description",
           "description": "A description for the component."
@@ -4657,6 +4677,14 @@
           "name": "closed",
           "description": "When `true`, the component will be hidden."
         },
+        {
+          "name": "collapsed",
+          "description": "When `true`, hides the component's content area."
+        },
+        {
+          "name": "collapsible",
+          "description": "When `true`, the component is collapsible."
+        },
         {
           "name": "description",
           "description": "A description for the component."

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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.1
+ * v1.9.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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.1
+ * v1.9.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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.1
+ * v1.9.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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.1
+ * v1.9.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-menu/action-menu.d.ts

@@ -2,7 +2,7 @@ import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
 import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { LoadableComponent } from "../../utils/loadable";
-import { Scale } from "../interfaces";
+import { Appearance, Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-action`s.
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
@@ -12,6 +12,8 @@ export declare class ActionMenu implements LoadableComponent {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  /** Specifies the appearance of the component. */
+  appearance: Extract<"solid" | "transparent", Appearance>;
   /**
    * When `true`, the component is expanded.
    */

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

@@ -7,13 +7,14 @@ import { HeadingLevel } from "../functional/Heading";
 import { Status } from "../interfaces";
 import { BlockMessages } from "./assets/block/t9n";
 import { LoadableComponent } from "../../utils/loadable";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * @slot - A slot for adding custom content.
  * @slot icon - A slot for adding a leading header icon with `calcite-icon`.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
  */
-export declare class Block implements ConditionalSlotComponent, InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent {
+export declare class Block implements ConditionalSlotComponent, InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent, OpenCloseComponent {
   /**
    * When `true`, the component is collapsible.
    */
@@ -42,6 +43,7 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    * When `true`, expands the component and its contents.
    */
   open: boolean;
+  openHandler(): void;
   /**
    * Displays a status-related indicator icon.
    */
@@ -66,20 +68,37 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    *
    */
   setFocus(): Promise<void>;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
   el: HTMLCalciteBlockElement;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: BlockMessages;
+  openTransitionProp: string;
+  transitionEl: HTMLElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteBlockBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteBlockBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteBlockClose: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteBlockOpen: EventEmitter<void>;
   /**
    * Emits when the component's header is clicked.
+   *
+   * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.
    */
   calciteBlockToggle: EventEmitter<void>;
   onHeaderClick: () => void;
+  private setTransitionEl;
   renderScrim(): VNode[];
   renderIcon(): VNode[];
   renderTitle(): VNode;

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

@@ -1,6 +1,3 @@
 export declare const SLOTS: {
   dropdownTrigger: string;
 };
-export declare const CSS: {
-  calciteDropdownContent: string;
-};

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

@@ -28,7 +28,7 @@ export declare class Flow implements LoadableComponent {
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  handleItemBackClick(): Promise<void>;
+  handleItemBackClick(event: CustomEvent): Promise<void>;
   getFlowDirection: (oldFlowItemCount: number, newFlowItemCount: number) => FlowDirection | null;
   updateFlowProps: () => void;
   render(): VNode;

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

@@ -21,6 +21,20 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   closable: boolean;
   /** When `true`, the component will be hidden. */
   closed: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   */
+  collapsed: boolean;
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  collapseDirection: "down" | "up";
+  /**
+   * When `true`, the component is collapsible.
+   */
+  collapsible: boolean;
   /**
    * When provided, the method will be called before it is removed from its parent `calcite-flow`.
    */
@@ -81,6 +95,10 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    * Fires when the close button is clicked.
    */
   calciteFlowItemClose: EventEmitter<void>;
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  calciteFlowItemToggle: EventEmitter<void>;
   el: HTMLCalciteFlowItemElement;
   containerEl: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
@@ -89,6 +107,8 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   effectiveLocaleChange(): void;
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   setFocus(): Promise<void>;
   /**
@@ -100,11 +120,13 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    *   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
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   handlePanelScroll: (event: CustomEvent<void>) => void;
   handlePanelClose: (event: CustomEvent<void>) => void;
+  handlePanelToggle: (event: CustomEvent<void>) => void;
   backButtonClick: () => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
   setContainerRef: (node: HTMLCalcitePanelElement) => void;

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

@@ -11,10 +11,11 @@ import { Scale } from "../interfaces";
 import { TimePickerMessages } from "../time-picker/assets/time-picker/t9n";
 import { T9nComponent } from "../../utils/t9n";
 import { InputTimePickerMessages } from "./assets/input-time-picker/t9n";
-export declare class InputTimePicker implements FloatingUIComponent, FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
+export declare class InputTimePicker implements FloatingUIComponent, FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent, LocalizedComponent, OpenCloseComponent, T9nComponent {
   /** When `true`, displays the `calcite-time-picker` component. */
   open: boolean;
-  openHandler(value: boolean): void;
+  openHandler(open: boolean): void;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /**
@@ -94,13 +95,23 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   /** whether the value of the input was changed as a result of user typing or not */
   private userChangedValue;
   private referenceElementId;
+  openTransitionProp: string;
+  transitionEl: HTMLCalciteInputElement;
   defaultMessages: InputTimePickerMessages;
   effectiveLocale: string;
   effectiveLocaleWatcher(locale: SupportedLocale): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteInputTimePickerBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteInputTimePickerBeforeOpen: EventEmitter<void>;
   /**
    * Fires when the time value is changed as a result of user input.
    */
   calciteInputTimePickerChange: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteInputTimePickerClose: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteInputTimePickerOpen: EventEmitter<void>;
   private hostBlurHandler;
   private calciteInternalInputFocusHandler;
   private calciteInternalInputInputHandler;
@@ -113,6 +124,10 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
    * @param delayed
    */
   reposition(delayed?: boolean): Promise<void>;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
   private delocalizeTimeString;
   private delocalizeTimeStringToParts;
   private getTimeStringFromParts;
@@ -126,7 +141,7 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   private shouldIncludeSeconds;
   private shouldIncludeFractionalSeconds;
   private setCalcitePopoverEl;
-  private setCalciteInputEl;
+  private setInputAndTransitionEl;
   private setCalciteTimePickerEl;
   private setInputValue;
   /**

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

@@ -5,6 +5,7 @@ import { LocalizedComponent } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { Kind, Scale, Width } from "../interfaces";
 import { NoticeMessages } from "./assets/notice/t9n";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
@@ -17,9 +18,10 @@ import { NoticeMessages } from "./assets/notice/t9n";
  * @slot link - A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc.
  * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.
  */
-export declare class Notice implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent {
+export declare class Notice implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent, OpenCloseComponent {
   /** When `true`, the component is visible. */
   open: boolean;
+  openHandler(): void;
   /** Specifies the kind of the component (will apply to top border and icon). */
   kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
   /** When `true`, a close button is added to the component. */
@@ -51,12 +53,21 @@ export declare class Notice implements ConditionalSlotComponent, LoadableCompone
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   render(): VNode;
-  /** Fired when the component is closed. */
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteNoticeBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteNoticeBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calciteNoticeClose: EventEmitter<void>;
-  /** Fired when the component is opened. */
+  /** Fires when the component is open and animation is complete. */
   calciteNoticeOpen: EventEmitter<void>;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
+  onBeforeClose(): void;
+  onBeforeOpen(): void;
+  onClose(): void;
+  onOpen(): void;
+  private setTransitionEl;
   private close;
   el: HTMLCalciteNoticeElement;
   /** The close button element. */
@@ -66,4 +77,6 @@ export declare class Notice implements ConditionalSlotComponent, LoadableCompone
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: NoticeMessages;
+  openTransitionProp: string;
+  transitionEl: HTMLElement;
 }

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

@@ -14,34 +14,39 @@ export declare class Pagination implements LocalizedComponent, LocalizedComponen
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */
   groupSeparator: boolean;
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  messages: PaginationMessages;
   /**
    * Use this property to override individual strings used by the component.
    */
   messageOverrides: Partial<PaginationMessages>;
   onMessagesChange(): void;
-  /** Specifies the number of items per page. */
-  pageSize: number;
   /**
    * Specifies the Unicode numeral system used by the component for localization.
    */
   numberingSystem: NumberingSystem;
+  /** Specifies the number of items per page. */
+  pageSize: number;
+  /** Specifies the size of the component. */
+  scale: Scale;
   /** Specifies the starting item number. */
   startItem: number;
   /** Specifies the total number of items. */
   totalItems: number;
-  /** Specifies the size of the component. */
-  scale: Scale;
+  handleTotalPages(): void;
   el: HTMLCalcitePaginationElement;
   defaultMessages: PaginationMessages;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   effectiveLocaleWatcher(): void;
-  /**
-   * Made into a prop for testing purposes only
-   *
-   * @internal
-   */
-  messages: PaginationMessages;
+  maxItems: number;
+  totalPages: number;
+  private breakpoints;
+  private resizeObserver;
   /**
    * Emits when the selected page changes.
    */
@@ -56,15 +61,17 @@ export declare class Pagination implements LocalizedComponent, LocalizedComponen
   nextPage(): Promise<void>;
   /** Go to the previous page of results. */
   previousPage(): Promise<void>;
+  private setMaxItemsToBreakpoint;
+  private resizeHandler;
   private getLastStart;
   private previousClicked;
   private nextClicked;
-  private showLeftEllipsis;
-  private showRightEllipsis;
+  private showStartEllipsis;
+  private showEndEllipsis;
   private emitUpdate;
-  renderPages(): VNode[];
+  private handlePageClick;
+  renderEllipsis(type: "start" | "end"): VNode;
+  renderItems(): VNode[];
   renderPage(start: number): VNode;
-  renderLeftEllipsis(): VNode;
-  renderRightEllipsis(): VNode;
   render(): VNode;
 }

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

@@ -8,3 +8,7 @@ export declare const CSS: {
   ellipsisStart: string;
   ellipsisEnd: string;
 };
+export declare const ICONS: {
+  next: string;
+  previous: string;
+};

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

@@ -1,4 +1,6 @@
 export type PanelMessages = {
   close: string;
   options: string;
+  collapse: string;
+  expand: string;
 };

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

@@ -25,6 +25,20 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   disabled: boolean;
   /** When `true`, displays a close button in the trailing side of the header. */
   closable: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   */
+  collapsed: boolean;
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  collapseDirection: "down" | "up";
+  /**
+   * When `true`, the component is collapsible.
+   */
+  collapsible: boolean;
   /**
    * Specifies the number at which section headings should start.
    */
@@ -60,8 +74,6 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   componentDidRender(): void;
   disconnectedCallback(): void;
   el: HTMLCalcitePanelElement;
-  backButtonEl: HTMLCalciteActionElement;
-  closeButtonEl: HTMLCalciteActionElement;
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
@@ -81,16 +93,19 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
    * Fires when the close button is clicked.
    */
   calcitePanelClose: EventEmitter<void>;
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  calcitePanelToggle: EventEmitter<void>;
   /**
    * Fires when the content is scrolled.
    */
   calcitePanelScroll: EventEmitter<void>;
   resizeHandler: () => void;
   setContainerRef: (node: HTMLElement) => void;
-  setCloseRef: (node: HTMLCalciteActionElement) => void;
-  setBackRef: (node: HTMLCalciteActionElement) => void;
   panelKeyDownHandler: (event: KeyboardEvent) => void;
   close: () => void;
+  collapse: () => void;
   panelScrollHandler: () => void;
   handleHeaderActionsStartSlotChange: (event: Event) => void;
   handleHeaderActionsEndSlotChange: (event: Event) => void;
@@ -113,14 +128,12 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
    *   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
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   renderHeaderContent(): VNode;
   renderActionBar(): VNode;
-  /**
-   * Allows user to override the entire header-content node.
-   */
   renderHeaderSlottedContent(): VNode;
   renderHeaderStartActions(): VNode;
   renderHeaderActionsEnd(): VNode;

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

@@ -21,6 +21,8 @@ export declare const ICONS: {
   menu: string;
   backLeft: string;
   backRight: string;
+  expand: string;
+  collapse: string;
 };
 export declare const SLOTS: {
   actionBar: string;

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

@@ -0,0 +1,3 @@
+export type StepperMessages = {
+  label: string;
+};

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

@@ -73,4 +73,5 @@ export declare class Stepper {
   private sortItems;
   private filterItems;
   private setStepperItemNumberingSystem;
+  private handleDefaultSlotChange;
 }

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

@@ -0,0 +1,3 @@
+export type StepperItemMessages = {
+  complete: string;
+};

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

@@ -0,0 +1,10 @@
+export declare const CSS: {
+  container: string;
+  stepperItemContent: string;
+  stepperItemDescription: string;
+  stepperItemHeader: string;
+  stepperItemHeading: string;
+  stepperItemHeaderText: string;
+  stepperItemNumber: string;
+  visuallyHidden: string;
+};