@esri/calcite-components 1.0.0-next.526 → 1.0.0-next.529

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-07-12T22:48:46",
+  "timestamp": "2022-07-13T17:14:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.16.1",
@@ -3634,6 +3634,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": true,
+          "docs": "When true, show abutton user can click to dismiss the chip.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "closed",
           "type": "boolean",
@@ -3714,8 +3731,14 @@
           "attr": "dismissible",
           "reflectToAttr": true,
           "docs": "Optionally show a button the user can click to dismiss the chip",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use closable instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use closable instead",
           "values": [
             {
               "type": "boolean"
@@ -11306,6 +11329,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "read-only",
+          "reflectToAttr": false,
+          "docs": "When true, still focusable but controls are gone and the value cannot be modified.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -12909,6 +12954,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": true,
+          "docs": "When true, displays a button user can click to dismiss the `calcite-notice`",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "color",
           "type": "\"blue\" | \"green\" | \"red\" | \"yellow\"",
@@ -12946,8 +13008,14 @@
           "attr": "dismissible",
           "reflectToAttr": true,
           "docs": "When true, a close button is added to the component.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use closable instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use closable instead",
           "values": [
             {
               "type": "boolean"
@@ -12962,7 +13030,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "Specifies an icon to display - accepts Calcite UI icon names.",
+          "docs": "When present, shows a default recommended icon. You can\nalso pass a calcite-ui-icon name to display a requested icon.",
           "docsTags": [],
           "values": [
             {
@@ -13538,6 +13606,40 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": true,
+          "docs": "When true, displays a close button in the trailing side of the header",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "closed",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "closed",
+          "reflectToAttr": true,
+          "docs": "When true, panel will be hidden",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "description",
           "type": "string",
@@ -13578,8 +13680,14 @@
           "attr": "dismissed",
           "reflectToAttr": true,
           "docs": "When true, hides the component.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use closed instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use closed instead",
           "values": [
             {
               "type": "boolean"
@@ -13595,8 +13703,14 @@
           "attr": "dismissible",
           "reflectToAttr": true,
           "docs": "When true, a close button is added to the component.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use closable instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use closable instead",
           "values": [
             {
               "type": "boolean"
@@ -14652,6 +14766,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": true,
+          "docs": "When true, display a close button within the Popover",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "closeButton",
           "type": "boolean",
@@ -14716,8 +14847,14 @@
           "attr": "dismissible",
           "reflectToAttr": true,
           "docs": "When true, a close button is added to the component.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use closable instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use closable instead",
           "values": [
             {
               "type": "boolean"
@@ -21176,6 +21313,70 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "intlDragHandleActive",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-active",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleChange",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-change",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleCommit",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-commit",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleIdle",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-idle",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "loading",
           "type": "boolean",

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.526
+ * v1.0.0-next.529
  */
 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.526
+ * v1.0.0-next.529
  */
 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.526
+ * v1.0.0-next.529
  */
 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.526
+ * v1.0.0-next.529
  */
 (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/chip/chip.d.ts

@@ -11,8 +11,14 @@ export declare class Chip implements ConditionalSlotComponent {
   appearance: Extract<"solid" | "clear", Appearance>;
   /** specify the color of the button, defaults to blue */
   color: ChipColor;
-  /** Optionally show a button the user can click to dismiss the chip */
+  /**
+   * Optionally show a button the user can click to dismiss the chip
+   *
+   * @deprecated use closable instead
+   */
   dismissible: boolean;
+  /** When true, show abutton user can click to dismiss the chip. */
+  closable: boolean;
   /**
    * Aria label for the "x" button
    *

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

@@ -11,7 +11,13 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   activeHandler(): void;
   /** The disabled state of the time input */
   disabled: boolean;
-  handleDisabledChange(value: boolean): void;
+  /**
+   * When true, still focusable but controls are gone and the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  handleDisabledAndReadOnlyChange(value: boolean): void;
   /** aria-label for the hour input */
   intlHour?: string;
   /** aria-label for the hour down button */

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

@@ -20,9 +20,18 @@ export declare class Notice implements ConditionalSlotComponent {
   active: boolean;
   /** The color for the component's top border and icon. */
   color: StatusColor;
-  /** When true, a close button is added to the component. */
+  /**
+   * When true, a close button is added to the component.
+   *
+   * @deprecated use closable instead
+   */
   dismissible?: boolean;
-  /** Specifies an icon to display - accepts Calcite UI icon names. */
+  /** When true, displays a button user can click to dismiss the `calcite-notice` */
+  closable?: boolean;
+  /**
+   * When present, shows a default recommended icon. You can
+   * also pass a calcite-ui-icon name to display a requested icon.
+   */
   icon: string | boolean;
   /**
    * Accessible name for the close button.

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

@@ -16,8 +16,12 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * When true, hides the component.
+   *
+   * @deprecated use closed instead
    */
   dismissed: boolean;
+  /** When true, panel will be hidden */
+  closed: boolean;
   dismissedHandler(): void;
   /**
    * When provided, this method will be called before it is removed from the parent flow.
@@ -29,8 +33,12 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   disabled: boolean;
   /**
    * When true, a close button is added to the component.
+   *
+   * @deprecated use closable instead
    */
   dismissible: boolean;
+  /** When true, displays a close button in the trailing side of the header */
+  closable: boolean;
   /**
    * Specifies the number at which section headings should start.
    */

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -13,6 +13,7 @@ export declare function calciteInternalListItemValueChangeHandler<T extends List
 export declare function calciteListFocusOutHandler<T extends Lists>(this: List<T>, event: FocusEvent): void;
 export declare function keyDownHandler<T extends Lists>(this: List<T>, event: KeyboardEvent): void;
 export declare function moveItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>, direction: "up" | "down"): number;
+export declare function getItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>): number;
 export declare function internalCalciteListChangeEvent<T extends Lists>(this: List<T>): void;
 export declare function removeItem<T extends Lists, U extends ListItemElement<T>>(this: List<T>, event: CustomEvent): void;
 export declare function setFocus<T extends Lists>(this: List<T>, focusId: ListFocusId): Promise<void>;

package/dist/types/components/pick-list/shared-list-render.d.ts

@@ -11,6 +11,8 @@ interface ListProps extends DOMAttributes<any> {
   filterPlaceholder: string;
   el: HTMLCalcitePickListElement | HTMLCalciteValueListElement;
   setFilterEl: (el: HTMLCalciteFilterElement) => void;
+  dragEnabled?: boolean;
+  storeAssistiveEl?: (el: HTMLSpanElement) => void;
 }
 export declare const List: FunctionalComponent<{
   props: ListProps;

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

@@ -18,8 +18,12 @@ export declare class Popover {
   closeButton: boolean;
   /**
    * When true, a close button is added to the component.
+   *
+   * @deprecated use closable instead
    */
   dismissible: boolean;
+  /** When true, display a close button within the Popover */
+  closable: boolean;
   /**
    * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
    */

package/dist/types/components/value-list/interfaces.d.ts

@@ -0,0 +1 @@
+export declare type DragStatus = "idle" | "active" | "change" | "commit";

package/dist/types/components/value-list/utils.d.ts

@@ -0,0 +1,8 @@
+import { DragStatus } from "./interfaces";
+import { ValueList } from "./value-list";
+export declare function getScreenReaderText(item: HTMLCalciteValueListItemElement, status: DragStatus, valueList: ValueList<HTMLCalciteValueListItemElement>): string;
+export declare function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {
+  handle: HTMLCalciteHandleElement;
+  item: HTMLCalciteValueListItemElement;
+};
+export declare function replacePlaceholders(text: string, label: string, position: number, total: number): string;

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

@@ -45,6 +45,30 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
    */
   selectionFollowsFocus: boolean;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleIdle?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the component.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleActive?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleChange?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleCommit?: string;
   selectedValues: Map<string, ItemElement>;
   dataForFilter: ItemData;
   items: ItemElement[];
@@ -54,6 +78,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   el: HTMLCalciteValueListElement;
   emitCalciteListChange: () => void;
   filterEl: HTMLCalciteFilterElement;
+  assistiveTextEl: HTMLSpanElement;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
@@ -83,6 +108,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   handleFilter: any;
   getItemData: any;
   keyDownHandler: (event: KeyboardEvent) => void;
+  handleBlur(): void;
   /** Returns the currently selected items */
   getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>>;
   /**
@@ -92,5 +118,9 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    */
   setFocus(focusId?: ListFocusId): Promise<void>;
   getIconType(): ICON_TYPES | null;
+  updateScreenReaderText(text: string): void;
+  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void;
+  storeAssistiveEl: (el: HTMLSpanElement) => void;
+  handleFocusIn: (event: FocusEvent) => void;
   render(): VNode;
 }