@esri/calcite-components 1.11.0-next.3 → 1.11.0

package/dist/extras/vscode-data.json

@@ -1669,6 +1669,21 @@
             }
           ]
         },
+        {
+          "name": "selection-display",
+          "description": "When `selectionMode` is `\"ancestors\"` or `\"multiple\"`, specifies the display of multiple `calcite-combobox-item` selections\n- `\"all\"` (displays all selections with individual `calcite-chip`s), `\"fit\"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `\"single\"` (display one `calcite-chip` with the total number of selections).",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "fit"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
         {
           "name": "selection-mode",
           "description": "Specifies the selection mode:\n- \"multiple\" allows any number of selected items (default),\n- \"single\" allows only one selection,\n- \"single-persist\" allow and require one open item,\n- \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.",

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.11.0-next.3
+ * v1.11.0
  */
 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.11.0-next.3
+ * v1.11.0
  */
 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.11.0-next.3
+ * v1.11.0
  */
 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.11.0-next.3
+ * v1.11.0
  */
 (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/resources.d.ts

@@ -8,6 +8,8 @@ export declare const CSS: {
   slotContainerHidden: string;
   textContainer: string;
   textContainerVisible: string;
+  indicatorWithIcon: string;
+  indicatorWithoutIcon: string;
 };
 export declare const SLOTS: {
   tooltip: string;

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

@@ -108,13 +108,11 @@ export declare class Alert implements OpenCloseComponent, LoadableComponent, T9n
   queueLength: number;
   /** is the alert queued */
   queued: boolean;
-  responsiveContainerWidth: number;
   private autoCloseTimeoutId;
   private closeButton;
   private initialOpenTime;
   private lastMouseOverBegin;
   private queueTimeout;
-  private resizeObserver;
   private totalOpenTime;
   private totalHoverTime;
   openTransitionProp: string;

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

@@ -1,4 +1,7 @@
 export type ComboboxMessages = {
+  all: string;
+  allSelected: string;
   clear: string;
   removeTag: string;
+  selected: string;
 };

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

@@ -8,7 +8,7 @@ import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { T9nComponent } from "../../utils/t9n";
 import { Scale, SelectionMode } from "../interfaces";
 import { ComboboxMessages } from "./assets/combobox/t9n";
-import { ComboboxChildElement } from "./interfaces";
+import { ComboboxChildElement, SelectionDisplay } from "./interfaces";
 interface ItemData {
   label: string;
   value: string;
@@ -21,6 +21,11 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * When `true`, the value-clearing will be disabled.
    */
   clearDisabled: boolean;
+  /**
+   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections
+   * - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections).
+   */
+  selectionDisplay: SelectionDisplay;
   /**When `true`, displays and positions the component. */
   open: boolean;
   openHandler(): void;
@@ -116,7 +121,8 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   /**
    * Updates the position of the component.
    *
-   * @param delayed
+   * @param delayed Reposition the component after a delay
+   * @returns Promise
    */
   reposition(delayed?: boolean): Promise<void>;
   /** Sets focus on the component. */
@@ -143,7 +149,9 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
+  componentDidUpdate(): void;
   disconnectedCallback(): void;
+  private allSelectedIndicatorChipEl;
   el: HTMLCalciteComboboxElement;
   placement: LogicalPlacement;
   filteredFlipPlacements: EffectivePlacement[];
@@ -157,6 +165,9 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   activeItemIndex: number;
   activeChipIndex: number;
   activeDescendant: string;
+  compactSelectionDisplay: boolean;
+  selectedHiddenChipsCount: number;
+  selectedVisibleChipsCount: number;
   text: string;
   /** when search text is cleared, reset active to  */
   textHandler(): void;
@@ -166,14 +177,17 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   textInput: HTMLInputElement;
   data: ItemData[];
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
-  resizeObserver: ResizeObserver;
+  private resizeObserver;
   private guid;
   private inputHeight;
   private floatingEl;
   private referenceEl;
+  private chipContainerEl;
   private listContainerEl;
   private ignoreSelectedEventsFlag;
+  private maxCompactBreakpoint;
   openTransitionProp: string;
+  private selectedIndicatorChipEl;
   transitionEl: HTMLDivElement;
   private clearValue;
   private clearInputValue;
@@ -192,9 +206,18 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   calciteChipCloseHandler: (comboboxItem: HTMLCalciteComboboxItemElement) => void;
   clickHandler: (event: MouseEvent) => void;
   private ensureRecentSelectedItemIsActive;
+  private hideChip;
+  private showChip;
+  private refreshChipDisplay;
+  private refreshSelectionDisplay;
   setFloatingEl: (el: HTMLDivElement) => void;
+  private setCompactSelectionDisplay;
   setContainerEl: (el: HTMLDivElement) => void;
+  setChipContainerEl: (el: HTMLDivElement) => void;
   setReferenceEl: (el: HTMLDivElement) => void;
+  setAllSelectedIndicatorChipEl: (el: HTMLCalciteChipElement) => void;
+  setSelectedIndicatorChipEl: (el: HTMLCalciteChipElement) => void;
+  private setVisibleAndHiddenChips;
   private getMaxScrollerHeight;
   private calculateSingleItemHeight;
   inputHandler: (event: Event) => void;
@@ -205,7 +228,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   toggleSelection(item: HTMLCalciteComboboxItemElement, value?: boolean): void;
   updateAncestors(item: HTMLCalciteComboboxItemElement): void;
   getFilteredItems(): HTMLCalciteComboboxItemElement[];
-  getSelectedItems(): HTMLCalciteComboboxItemElement[];
+  private getSelectedItems;
   private updateItems;
   getData(): ItemData[];
   getNeedsIcon(): boolean;
@@ -221,9 +244,14 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   private scrollToActiveItem;
   shiftActiveItemIndex(delta: number): void;
   updateActiveItemIndex(index: number): void;
+  private isAllSelected;
   isMulti(): boolean;
   comboboxFocusHandler: () => void;
   renderChips(): VNode[];
+  renderAllSelectedIndicatorChip(): VNode;
+  renderAllSelectedIndicatorChipCompact(): VNode;
+  renderSelectedIndicatorChip(): VNode;
+  renderSelectedIndicatorChipCompact(): VNode;
   renderInput(): VNode;
   renderListBoxOptions(): VNode[];
   renderFloatingUIContainer(): VNode;

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

@@ -3,3 +3,4 @@ export interface listItem {
   value: string;
 }
 export type ComboboxChildElement = HTMLCalciteComboboxItemElement | HTMLCalciteComboboxItemGroupElement;
+export type SelectionDisplay = "all" | "fit" | "single";

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

@@ -2,5 +2,8 @@ export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
 export declare const CSS: {
+  chipInvisible: string;
+  selectionDisplayFit: string;
+  selectionDisplaySingle: string;
   listContainer: string;
 };

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

@@ -134,6 +134,7 @@ export declare class List implements InteractiveComponent, LoadableComponent, So
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   parentListEl: HTMLCalciteListElement;
   sortable: Sortable;
+  private ancestorOfFirstFilteredItem;
   /**
    * Sets focus on the component's first focusable element.
    *
@@ -165,5 +166,7 @@ export declare class List implements InteractiveComponent, LoadableComponent, So
   private focusRow;
   private isNavigable;
   private handleListKeydown;
+  private findAncestorOfFirstFilteredItem;
+  private getTopLevelAncestorItemElement;
   handleNudgeEvent(event: CustomEvent<HandleNudge>): void;
 }

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

@@ -13,6 +13,7 @@ import { LoadableComponent } from "../../utils/loadable";
  * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
+ * @slot content-bottom - A slot for adding content below the component's `label` and `description`.
  */
 export declare class ListItem implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   /**
@@ -140,6 +141,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   hasCustomContent: boolean;
   hasContentStart: boolean;
   hasContentEnd: boolean;
+  hasContentBottom: boolean;
   containerEl: HTMLTableRowElement;
   contentEl: HTMLTableCellElement;
   actionsStartEl: HTMLTableCellElement;
@@ -160,6 +162,8 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   renderContentStart(): VNode;
   renderCustomContent(): VNode;
   renderContentEnd(): VNode;
+  renderContentBottom(): VNode;
+  renderDefaultContainer(): VNode;
   renderContentProperties(): VNode;
   renderContentContainer(): VNode;
   render(): VNode;
@@ -170,6 +174,7 @@ export declare class ListItem implements InteractiveComponent, LoadableComponent
   handleActionsEndSlotChange: (event: Event) => void;
   handleContentStartSlotChange: (event: Event) => void;
   handleContentEndSlotChange: (event: Event) => void;
+  handleContentBottomSlotChange: (event: Event) => void;
   setSelectionDefaults(): void;
   handleOpenableChange(slotEl: HTMLSlotElement): void;
   handleDefaultSlotChange: (event: Event) => void;

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

@@ -14,6 +14,7 @@ export declare const CSS: {
   label: string;
   description: string;
   contentEnd: string;
+  contentBottom: string;
   actionsEnd: string;
   selectionContainer: string;
   openContainer: string;
@@ -23,6 +24,7 @@ export declare const SLOTS: {
   actionsStart: string;
   contentStart: string;
   content: string;
+  contentBottom: string;
   contentEnd: string;
   actionsEnd: string;
 };

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

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

package/dist/types/components/stepper/functional/step-bar.d.ts

@@ -0,0 +1,18 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+interface StepBarProps {
+  active: boolean;
+  complete: boolean;
+  error: boolean;
+  disabled: boolean;
+  key: number;
+}
+export declare const CSS: {
+  stepBar: string;
+  stepBarActive: string;
+  stepBarComplete: string;
+  stepBarDisabled: string;
+  stepBarError: string;
+  stepBarInActive: string;
+};
+export declare const StepBar: FunctionalComponent<StepBarProps>;
+export {};

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

@@ -0,0 +1,13 @@
+export declare const ITEM_MIN_WIDTH: {
+  s: number;
+  m: number;
+  l: number;
+};
+export declare const CSS: {
+  actionIcon: string;
+  actionIconStart: string;
+  actionIconEnd: string;
+  actionContainer: string;
+  stepBarContainer: string;
+  singleView: string;
+};

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

@@ -1,7 +1,7 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
+import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { StepperMessages } from "./assets/stepper/t9n";
 /**
@@ -77,20 +77,30 @@ export declare class Stepper implements LocalizedComponent, T9nComponent {
   defaultMessages: StepperMessages;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
+  currentActivePosition: number;
+  handlePositionChange(): void;
+  elWidth: number;
+  handleElWidthChange(): void;
+  private enabledItems;
   private itemMap;
-  /** list of sorted Stepper items */
   private items;
-  /** list of enabled Stepper items */
-  private enabledItems;
-  /** keep track of the currently active item position */
-  private currentPosition;
   private mutationObserver;
+  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */
+  private multipleViewMode;
+  private guid;
+  private containerEl;
+  private resizeObserver;
   private updateItems;
+  private determineActiveStepper;
   private getEnabledStepIndex;
   private updateStep;
-  private sortItems;
   private filterItems;
   private setStepperItemNumberingSystem;
-  private handleDefaultSlotChange;
+  private renderAction;
+  private handleActionClick;
   private getFirstEnabledStepperPosition;
+  private setContainerEl;
+  handleDefaultSlotChange: (event: Event) => void;
+  private setGridTemplateColumns;
+  private getMinWidthOfStepperItem;
 }

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

@@ -62,6 +62,12 @@ export declare class StepperItem implements InteractiveComponent, LocalizedCompo
    * @internal
    */
   scale: Scale;
+  /**
+   * Specifies if the user is viewing one `stepper-item` at a time.
+   * Helps in determining if header region is tabbable.
+   * @internal
+   */
+  multipleViewMode: boolean;
   /**
    * Use this property to override individual strings used by the component.
    */

package/dist/types/components.d.ts

@@ -27,8 +27,8 @@ import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
 import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
+import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
 import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
-import { ComboboxChildElement } from "./components/combobox/interfaces";
 import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
@@ -1024,7 +1024,8 @@ export namespace Components {
         "placeholderIconFlipRtl": boolean;
         /**
           * Updates the position of the component.
-          * @param delayed
+          * @param delayed Reposition the component after a delay
+          * @returns Promise
          */
         "reposition": (delayed?: boolean) => Promise<void>;
         /**
@@ -1040,6 +1041,10 @@ export namespace Components {
           * @readonly
          */
         "selectedItems": HTMLCalciteComboboxItemElement[];
+        /**
+          * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections).
+         */
+        "selectionDisplay": SelectionDisplay;
         /**
           * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
          */
@@ -4226,6 +4231,10 @@ export namespace Components {
           * Made into a prop for testing purposes only
          */
         "messages": StepperItemMessages;
+        /**
+          * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable.
+         */
+        "multipleViewMode": boolean;
         /**
           * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
          */
@@ -7064,6 +7073,10 @@ declare namespace LocalJSX {
           * @readonly
          */
         "selectedItems"?: HTMLCalciteComboboxItemElement[];
+        /**
+          * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections).
+         */
+        "selectionDisplay"?: SelectionDisplay;
         /**
           * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
          */

package/dist/types/utils/dom.d.ts

@@ -47,6 +47,13 @@ export declare function getElementDir(el: HTMLElement): Direction;
  * @deprecated
  */
 export declare function getElementProp(el: Element, attribute: string, fallbackValue: any): any;
+/**
+ * This helper returns the computed width in pixels of a rendered HTMLElement.
+ *
+ * @param {HTMLElement} el An element.
+ * @returns {number} The element's width.
+ */
+export declare function getElementWidth(el: HTMLElement): number;
 /**
  * This helper returns the rootNode of an element.
  *
@@ -61,6 +68,15 @@ export declare function getRootNode(el: Element): Document | ShadowRoot;
  * @returns {ShadowRoot|null} The element's root node ShadowRoot.
  */
 export declare function getShadowRootNode(el: Element): ShadowRoot | null;
+/**
+ * This helper returns the computed width in pixels a given text string takes up on screen.
+ *
+ * See https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
+ *
+ * @param {string} text The string of text to measure.
+ * @param {string} font The CSS font attribute's value, which should include size and face, e.g. "12px Arial".
+ */
+export declare function getTextWidth(text: string, font: string): number;
 /**
  * This helper returns the host of a ShadowRoot.
  *