@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.83

package/dist/collection/components/pagination/pagination.css

@@ -130,9 +130,7 @@
 }
 
 :host button {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 :host button:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -156,10 +154,7 @@
 }
 .previous:hover, .next:hover, .page:hover {
   color: var(--calcite-ui-text-1);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 .page:hover {
@@ -187,7 +182,7 @@
 }
 
 .next {
-  margin-right: 0px;
+  margin-inline-end: 0px;
 }
 
 .page,

package/dist/collection/components/pagination/pagination.js

@@ -1,8 +1,11 @@
 /*!
  * 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.83
  */
-import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
+import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
+import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
+import { localizeNumberString } from "../../utils/locale";
 import { CSS, TEXT } from "./resources";
 const maxPagesDisplayed = 5;
 export class Pagination {
@@ -18,16 +21,26 @@ export class Pagination {
     this.start = 1;
     /** total number of items */
     this.total = 0;
-    /** Used as an accessible label (aria-label) for the next button
+    /**
+     * Used as an accessible label (aria-label) for the next button
+     *
      * @default "Next"
      */
     this.textLabelNext = TEXT.nextLabel;
-    /** Used as an accessible label (aria-label) of the previous button
+    /**
+     * Used as an accessible label (aria-label) of the previous button
+     *
      * @default "Previous"
      */
     this.textLabelPrevious = TEXT.previousLabel;
     /** The scale of the pagination */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    this.globalAttributes = {};
     this.previousClicked = () => {
       this.previousPage().then();
       this.emitUpdate();
@@ -39,6 +52,17 @@ export class Pagination {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    watchGlobalAttributes(this, ["lang"]);
+  }
+  disconnectedCallback() {
+    unwatchGlobalAttributes(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------
@@ -115,6 +139,7 @@ export class Pagination {
     return pages.map((page) => this.renderPage(page));
   }
   renderPage(start) {
+    const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
     const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
     return (h("button", { class: {
         [CSS.page]: true,
@@ -122,7 +147,7 @@ export class Pagination {
       }, onClick: () => {
         this.start = start;
         this.emitUpdate();
-      } }, page));
+      } }, localizeNumberString(page.toString(), lang, true)));
   }
   renderLeftEllipsis() {
     if (this.total / this.num > maxPagesDisplayed && this.showLeftEllipsis()) {
@@ -284,6 +309,9 @@ export class Pagination {
       "defaultValue": "\"m\""
     }
   }; }
+  static get states() { return {
+    "globalAttributes": {}
+  }; }
   static get events() { return [{
       "method": "calcitePaginationUpdate",
       "name": "calcitePaginationUpdate",

package/dist/collection/components/pagination/resources.js

@@ -1,6 +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.83
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -236,11 +236,11 @@ h4.heading, h5.heading {
 .header-content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
-  overflow: hidden;
   margin-inline-end: auto;
 }
 .header-content .heading, .header-content .summary {
@@ -312,6 +312,7 @@ h4.heading, h5.heading {
   flex-wrap: nowrap;
   align-items: stretch;
   background-color: var(--calcite-ui-background);
+  z-index: 1;
 }
 
 .footer {

package/dist/collection/components/panel/panel.js

@@ -1,14 +1,16 @@
 /*!
  * 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.83
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -50,11 +52,21 @@ export class Panel {
      * Opens the action menu.
      */
     this.menuOpen = false;
+    this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.resizeHandler = () => {
+      const { panelScrollEl } = this;
+      if (!panelScrollEl ||
+        typeof panelScrollEl.scrollHeight !== "number" ||
+        typeof panelScrollEl.offsetHeight !== "number") {
+        return;
+      }
+      panelScrollEl.tabIndex = panelScrollEl.scrollHeight > panelScrollEl.offsetHeight ? 0 : -1;
+    };
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
@@ -71,6 +83,7 @@ export class Panel {
     };
     this.dismiss = () => {
       this.dismissed = true;
+      this.calcitePanelDismiss.emit();
     };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
@@ -78,6 +91,15 @@ export class Panel {
     this.backButtonClick = () => {
       this.calcitePanelBackClick.emit();
     };
+    this.setPanelScrollEl = (el) => {
+      var _a, _b;
+      this.panelScrollEl = el;
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      if (el) {
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        this.resizeHandler();
+      }
+    };
   }
   dismissedHandler() {
     this.calcitePanelDismissedChange.emit();
@@ -99,14 +121,20 @@ export class Panel {
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
+    var _a;
     disconnectConditionalSlotComponent(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a, _b, _c;
     if (focusId === "dismiss-button") {
@@ -119,7 +147,8 @@ export class Panel {
     }
     (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
   }
-  /** Scrolls panel content to a particular set of coordinates.
+  /**
+   * Scrolls panel content to a particular set of coordinates.
    *
    * ```
    *   myCalcitePanel.scrollContentTo({
@@ -128,6 +157,8 @@ export class Panel {
    *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    *   });
    * ```
+   *
+   * @param options
    */
   async scrollContentTo(options) {
     var _a;
@@ -218,9 +249,9 @@ export class Panel {
     const hasFab = getSlotted(el, SLOTS.fab);
     const defaultSlotNode = h("slot", { key: "default-slot" });
     const contentWrapperKey = "content-wrapper";
-    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 },
+    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl },
       h("section", { class: CSS.contentContainer }, defaultSlotNode),
-      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
+      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, defaultSlotNode));
   }
   renderFab() {
     return (h("div", { class: CSS.fabContainer },
@@ -228,7 +259,7 @@ export class Panel {
   }
   render() {
     const { dismissed, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterNode()));
@@ -525,13 +556,31 @@ export class Panel {
     }
   }; }
   static get events() { return [{
+      "method": "calcitePanelDismiss",
+      "name": "calcitePanelDismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the close button has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calcitePanelDismissedChange",
       "name": "calcitePanelDismissedChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use calcitePanelDismiss instead."
+          }],
         "text": "Emitted when the close button has been clicked."
       },
       "complexType": {
@@ -575,7 +624,10 @@ export class Panel {
       "complexType": {
         "signature": "(focusId?: \"dismiss-button\" | \"back-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -587,14 +639,20 @@ export class Panel {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "scrollContentTo": {
       "complexType": {
         "signature": "(options?: ScrollToOptions) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "options"
+              }],
             "text": ""
           }],
         "references": {
@@ -608,8 +666,11 @@ export class Panel {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Scrolls panel content to a particular set of coordinates.\n\n```\n myCalcitePanel.scrollContentTo({\n   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n });\n```",
-        "tags": []
+        "text": "Scrolls panel content to a particular set of coordinates.\n\n```\n  myCalcitePanel.scrollContentTo({\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n  });\n```",
+        "tags": [{
+            "name": "param",
+            "text": "options"
+          }]
       }
     }
   }; }

package/dist/collection/components/panel/resources.js

@@ -1,6 +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.83
  */
 export const CSS = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-list.js

@@ -1,10 +1,11 @@
 /*!
  * 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.83
  */
 import { Component, Element, Event, Listen, Method, Prop, State, h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
+import { calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, calciteListFocusOutHandler, initialize, initializeObserver, mutationObserverCallback, selectSiblings, setUpItems, keyDownHandler, setFocus, removeItem } from "./shared-list-logic";
 import List from "./shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -82,12 +83,13 @@ export class PickList {
   calciteListItemChangeHandler(event) {
     calciteListItemChangeHandler.call(this, event);
   }
-  calciteListItemPropsChangeHandler(event) {
+  calciteInternalListItemPropsChangeHandler(event) {
     event.stopPropagation();
     this.setUpFilter();
   }
-  calciteListItemValueChangeHandler(event) {
-    calciteListItemValueChangeHandler.call(this, event);
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
   }
   calciteListFocusOutHandler(event) {
     calciteListFocusOutHandler.call(this, event);
@@ -114,7 +116,11 @@ export class PickList {
   async getSelectedItems() {
     return this.selectedValues;
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -322,7 +328,10 @@ export class PickList {
       "complexType": {
         "signature": "(focusId?: ListFocusId) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -338,7 +347,10 @@ export class PickList {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }
@@ -356,14 +368,14 @@ export class PickList {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemPropsChange",
-      "method": "calciteListItemPropsChangeHandler",
+      "name": "calciteInternalListItemPropsChange",
+      "method": "calciteInternalListItemPropsChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteListItemValueChange",
-      "method": "calciteListItemValueChangeHandler",
+      "name": "calciteInternalListItemValueChange",
+      "method": "calciteInternalListItemValueChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/pick-list/resources.js

@@ -1,6 +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.83
  */
 export const CSS = {
   sticky: "sticky-pos"

package/dist/collection/components/pick-list/shared-list-logic.js

@@ -1,6 +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.83
  */
 import { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";
@@ -62,8 +63,7 @@ export function calciteListItemChangeHandler(event) {
   this.lastSelectedItem = item;
   this.emitCalciteListChange();
 }
-export function calciteListItemValueChangeHandler(event) {
-  event.stopPropagation();
+export function calciteInternalListItemValueChangeHandler(event) {
   const oldValue = event.detail.oldValue;
   const selectedValues = this.selectedValues;
   if (selectedValues.has(oldValue)) {
@@ -71,6 +71,7 @@ export function calciteListItemValueChangeHandler(event) {
     selectedValues.delete(oldValue);
     selectedValues.set(event.detail.newValue, item);
   }
+  event.stopPropagation();
 }
 // --------------------------------------------------------------------------
 //

package/dist/collection/components/pick-list/shared-list-render.js

@@ -1,6 +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.83
  */
 var __rest = (this && this.__rest) || function (s, e) {
   var t = {};
@@ -14,11 +15,12 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { h, Host } from "@stencil/core";
+import { toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 export const List = (_a) => {
   var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
-  return (h(Host, Object.assign({ "aria-busy": loading.toString(), role: "menu" }, rest),
+  return (h(Host, Object.assign({ "aria-busy": toAriaBoolean(loading), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
         filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,

package/dist/collection/components/pick-list-group/pick-list-group.js

@@ -1,6 +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.83
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/pick-list-group/resources.js

@@ -1,6 +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.83
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/pick-list-item/pick-list-item.css

@@ -105,9 +105,7 @@
   cursor: pointer;
   align-items: center;
   background-color: transparent;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .label:focus{
   outline: 2px solid var(--calcite-ui-brand);
@@ -166,6 +164,7 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  overflow: hidden;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -174,7 +173,6 @@
   line-height: 1.375;
   word-wrap: break-word;
   word-break: break-word;
-  overflow: hidden;
 }
 
 .title{