@esri/solutions-components 0.7.0 → 0.7.2

package/dist/components/pagination.js

@@ -8,30 +8,51 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFoc
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as createObserver } from './observers.js';
-import { g as getBreakpoints } from './responsive.js';
+import { CoreBreakpointWidthDefaultMd, CoreBreakpointWidthDefaultSm, CoreBreakpointWidthDefaultXs, CoreBreakpointWidthDefaultXxs, CoreBreakpointWidthDefaultLg } from '@esri/calcite-design-tokens/dist/es6/calcite-headless';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * 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
+ * v1.11.0
  */
 const CSS = {
   page: "page",
-  selected: "is-selected",
-  previous: "previous",
-  next: "next",
-  disabled: "is-disabled",
+  selected: "selected",
+  chevron: "chevron",
+  disabled: "disabled",
   ellipsis: "ellipsis",
-  ellipsisStart: "ellipsis--start",
-  ellipsisEnd: "ellipsis--end",
 };
 const ICONS = {
-  next: "chevronRight",
-  previous: "chevronLeft",
+  next: "chevron-right",
+  previous: "chevron-left",
+  first: "chevron-start",
+  last: "chevron-end",
 };
 
-const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .previous,:host([scale=s]) .next,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .previous,:host([scale=m]) .next,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .previous,:host([scale=l]) .next,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .previous,:host([scale=l]) .next{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.previous,.next,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3)}.previous,.next,.page{cursor:pointer;border-block:2px solid transparent}.previous:hover,.next:hover,.page:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-ui-border-2)}.page.is-selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.previous:hover,.next:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.previous:active,.next:active{background-color:var(--calcite-ui-foreground-3)}.previous.is-disabled,.next.is-disabled{pointer-events:none;background-color:transparent}.previous.is-disabled>calcite-icon,.next.is-disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * 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
+ */
+/**
+ * A breakpoints lookup object.
+ */
+const breakpoints = {
+  width: {
+    large: cssLengthToNumber(CoreBreakpointWidthDefaultLg),
+    medium: cssLengthToNumber(CoreBreakpointWidthDefaultMd),
+    small: cssLengthToNumber(CoreBreakpointWidthDefaultSm),
+    xsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXs),
+    xxsmall: cssLengthToNumber(CoreBreakpointWidthDefaultXxs),
+  },
+};
+function cssLengthToNumber(length) {
+  return parseInt(length);
+}
+
+const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-ui-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.chevron:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.chevron:active{background-color:var(--calcite-ui-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const firstAndLastPageCount = 2;
 const ellipsisCount = 2;
@@ -40,6 +61,7 @@ const maxItemBreakpoints = {
   medium: 9,
   small: 7,
   xsmall: 5,
+  xxsmall: 1,
 };
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
   constructor() {
@@ -49,6 +71,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
+    this.firstClicked = () => {
+      this.startItem = 1;
+      this.emitUpdate();
+    };
+    this.lastClicked = () => {
+      this.startItem = this.lastStartItem;
+      this.emitUpdate();
+    };
     this.previousClicked = async () => {
       await this.previousPage();
       this.emitUpdate();
@@ -72,13 +102,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     this.totalItems = 0;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
-    this.maxItems = maxItemBreakpoints.xsmall;
+    this.maxItems = maxItemBreakpoints.xxsmall;
     this.totalPages = undefined;
+    this.lastStartItem = undefined;
+    this.isXXSmall = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   handleTotalPages() {
+    if (this.pageSize < 1) {
+      this.pageSize = 1;
+    }
     this.totalPages = this.totalItems / this.pageSize;
   }
   effectiveLocaleChange() {
@@ -91,6 +126,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       useGrouping: this.groupSeparator,
     };
   }
+  handleLastStartItemChange() {
+    const { totalItems, pageSize, totalPages } = this;
+    this.lastStartItem =
+      (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1;
+  }
+  handleIsXXSmall() {
+    this.isXXSmall = this.maxItems === maxItemBreakpoints.xxsmall;
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -103,10 +146,11 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
   }
   async componentWillLoad() {
-    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
-    this.breakpoints = breakpoints;
+    await setUpMessages(this);
     setUpLoadableComponent(this);
     this.handleTotalPages();
+    this.handleLastStartItemChange();
+    this.handleIsXXSmall();
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -130,7 +174,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   }
   /** Go to the next page of results. */
   async nextPage() {
-    this.startItem = Math.min(this.getLastStart(), this.startItem + this.pageSize);
+    this.startItem = Math.min(this.lastStartItem, this.startItem + this.pageSize);
   }
   /** Go to the previous page of results. */
   async previousPage() {
@@ -142,7 +186,6 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   //
   // --------------------------------------------------------------------------
   setMaxItemsToBreakpoint(width) {
-    const { breakpoints } = this;
     if (!breakpoints || !width) {
       return;
     }
@@ -158,12 +201,11 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       this.maxItems = maxItemBreakpoints.small;
       return;
     }
-    this.maxItems = maxItemBreakpoints.xsmall;
-  }
-  getLastStart() {
-    const { totalItems, pageSize, totalPages } = this;
-    const lastStart = totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize;
-    return lastStart + 1;
+    if (width >= breakpoints.width.xxsmall) {
+      this.maxItems = maxItemBreakpoints.xsmall;
+      return;
+    }
+    this.maxItems = maxItemBreakpoints.xxsmall;
   }
   showStartEllipsis() {
     return (this.totalPages > this.maxItems &&
@@ -184,19 +226,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
   //
   //--------------------------------------------------------------------------
   renderEllipsis(type) {
-    return (h("span", { class: {
-        [CSS.ellipsis]: true,
-        [CSS.ellipsisStart]: type === "start",
-        [CSS.ellipsisEnd]: type === "end",
-      }, key: type }, "\u2026"));
+    return (h("span", { class: CSS.ellipsis, "data-test-ellipsis": type, key: type }, "\u2026"));
   }
   renderItems() {
-    const { totalItems, pageSize, startItem, maxItems, totalPages } = this;
+    const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;
     const items = [];
+    if (isXXSmall) {
+      items.push(this.renderPage(startItem));
+      return items;
+    }
     const renderFirstPage = totalItems > pageSize;
     const renderStartEllipsis = this.showStartEllipsis();
     const renderEndEllipsis = this.showEndEllipsis();
-    const lastStart = this.getLastStart();
     if (renderFirstPage) {
       items.push(this.renderPage(1));
     }
@@ -212,7 +253,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     // if we don't need ellipses render the whole set
     if (totalPages - 1 <= remainingItems) {
       nextStart = 1 + pageSize;
-      end = lastStart - pageSize;
+      end = lastStartItem - pageSize;
     }
     else {
       // if we're within max pages of page 1
@@ -223,8 +264,8 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
       else {
         // if we're within max pages of last page
         if (startItem + remainingItems * pageSize >= totalItems) {
-          nextStart = lastStart - remainingItems * pageSize;
-          end = lastStart - pageSize;
+          nextStart = lastStartItem - remainingItems * pageSize;
+          end = lastStartItem - pageSize;
         }
         else {
           // if we're within the center pages
@@ -240,7 +281,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     if (renderEndEllipsis) {
       items.push(this.renderEllipsis("end"));
     }
-    items.push(this.renderPage(lastStart));
+    items.push(this.renderPage(lastStartItem));
     return items;
   }
   renderPage(start) {
@@ -258,27 +299,51 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         [CSS.selected]: selected,
       }, onClick: this.handlePageClick, value: start }, displayedPage));
   }
+  renderPreviousChevron() {
+    const { pageSize, startItem, messages } = this;
+    const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
+    return (h("button", { "aria-label": messages.previous, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, "data-test-chevron": "previous", disabled: disabled, key: "previous", onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.previous, scale: getIconScale(this.scale) })));
+  }
+  renderNextChevron() {
+    const { totalItems, pageSize, startItem, messages } = this;
+    const disabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
+    return (h("button", { "aria-label": messages.next, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, "data-test-chevron": "next", disabled: disabled, key: "next-button", onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.next, scale: getIconScale(this.scale) })));
+  }
+  renderFirstChevron() {
+    const { messages, startItem, isXXSmall } = this;
+    const disabled = startItem === 1;
+    return isXXSmall ? (h("button", { "aria-label": messages.first, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, disabled: disabled, key: "first-button", onClick: this.firstClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.first, scale: getIconScale(this.scale) }))) : null;
+  }
+  renderLastChevron() {
+    const { messages, startItem, isXXSmall, lastStartItem } = this;
+    const disabled = startItem === lastStartItem;
+    return isXXSmall ? (h("button", { "aria-label": messages.last, class: {
+        [CSS.chevron]: true,
+        [CSS.disabled]: disabled,
+      }, disabled: disabled, key: "last-button", onClick: this.lastClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.last, scale: getIconScale(this.scale) }))) : null;
+  }
   render() {
-    const { totalItems, pageSize, startItem, messages, scale } = this;
-    const prevDisabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
-    const nextDisabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
-    const iconScale = scale === "l" ? "m" : "s";
-    return (h(Fragment, null, h("button", { "aria-label": messages.previous, class: {
-        [CSS.previous]: true,
-        [CSS.disabled]: prevDisabled,
-      }, disabled: prevDisabled, onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.previous, scale: iconScale })), this.renderItems(), h("button", { "aria-label": messages.next, class: {
-        [CSS.next]: true,
-        [CSS.disabled]: nextDisabled,
-      }, disabled: nextDisabled, onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.next, scale: iconScale }))));
+    return (h(Fragment, null, this.renderFirstChevron(), this.renderPreviousChevron(), this.renderItems(), this.renderNextChevron(), this.renderLastChevron()));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
-    "pageSize": ["handleTotalPages"],
-    "totalItems": ["handleTotalPages"],
-    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
+    "totalItems": ["handleTotalPages", "handleLastStartItemChange"],
+    "pageSize": ["handleTotalPages", "handleLastStartItemChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"],
+    "totalPages": ["handleLastStartItemChange"],
+    "maxItems": ["handleIsXXSmall"]
   }; }
   static get style() { return paginationCss; }
 }, [17, "calcite-pagination", {
@@ -286,7 +351,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     "messages": [1040],
     "messageOverrides": [1040],
     "numberingSystem": [1, "numbering-system"],
-    "pageSize": [514, "page-size"],
+    "pageSize": [1538, "page-size"],
     "scale": [513],
     "startItem": [1538, "start-item"],
     "totalItems": [514, "total-items"],
@@ -294,14 +359,18 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     "effectiveLocale": [32],
     "maxItems": [32],
     "totalPages": [32],
+    "lastStartItem": [32],
+    "isXXSmall": [32],
     "setFocus": [64],
     "nextPage": [64],
     "previousPage": [64]
   }, undefined, {
     "messageOverrides": ["onMessagesChange"],
-    "pageSize": ["handleTotalPages"],
-    "totalItems": ["handleTotalPages"],
-    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
+    "totalItems": ["handleTotalPages", "handleLastStartItemChange"],
+    "pageSize": ["handleTotalPages", "handleLastStartItemChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"],
+    "totalPages": ["handleLastStartItemChange"],
+    "maxItems": ["handleIsXXSmall"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/panel.js

@@ -21,7 +21,7 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * 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
+ * v1.11.0
  */
 const CSS = {
   actionBarContainer: "action-bar-container",
@@ -46,8 +46,8 @@ const ICONS = {
   menu: "ellipsis",
   backLeft: "chevron-left",
   backRight: "chevron-right",
-  expand: "chevron-up",
-  collapse: "chevron-down",
+  expand: "chevron-down",
+  collapse: "chevron-up",
 };
 const SLOTS = {
   actionBar: "action-bar",
@@ -60,7 +60,7 @@ const SLOTS = {
   footerActions: "footer-actions",
 };
 
-const panelCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}.container[hidden]{display:none}.header{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-ui-border-3)}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}.footer{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding, 0.5rem);border-block-start:1px solid var(--calcite-ui-border-3)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}";
+const panelCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}.container[hidden]{display:none}.header{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-ui-border-3)}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}.footer{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding, 0.5rem);border-block-start:1px solid var(--calcite-ui-border-3)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
   constructor() {
@@ -254,7 +254,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
     if (collapseDirection === "up") {
       icons.reverse();
     }
-    const collapseNode = collapsible ? (h("calcite-action", { "aria-expanded": toAriaBoolean(!collapsed), "aria-label": collapse, "data-test": "collapse", icon: collapsed ? icons[0] : icons[1], onClick: this.collapse, text: collapse, title: !collapsed ? expand : collapse })) : null;
+    const collapseNode = collapsible ? (h("calcite-action", { "aria-expanded": toAriaBoolean(!collapsed), "aria-label": collapse, "data-test": "collapse", icon: collapsed ? icons[0] : icons[1], onClick: this.collapse, text: collapse, title: collapsed ? expand : collapse })) : null;
     const closeNode = closable ? (h("calcite-action", { "aria-label": close, "data-test": "close", icon: ICONS.close, onClick: this.close, text: close, title: close })) : null;
     const slotNode = (h("slot", { name: SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;

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

@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * 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
+ * v1.11.0
  */
 const CSS = {
   actions: "actions",

package/dist/components/popover.js

@@ -16,6 +16,7 @@ import { i as isActivationKey } from './key.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
 import { F as FloatingArrow } from './FloatingArrow.js';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
@@ -23,7 +24,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * 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
+ * v1.11.0
  */
 const CSS = {
   container: "container",
@@ -43,7 +44,7 @@ const ARIA_EXPANDED = "aria-expanded";
 /*!
  * 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
+ * v1.11.0
  */
 class PopoverManager {
   constructor() {
@@ -373,7 +374,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     const { messages, closable } = this;
     return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
+      ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;

package/dist/components/public-notification.js

@@ -32,7 +32,7 @@ import { d as defineCustomElement$q } from './input-message.js';
 import { d as defineCustomElement$p } from './input-text.js';
 import { d as defineCustomElement$o } from './label2.js';
 import { d as defineCustomElement$n } from './list.js';
-import { d as defineCustomElement$m } from './list-item2.js';
+import { d as defineCustomElement$m } from './list-item.js';
 import { d as defineCustomElement$l } from './loader.js';
 import { d as defineCustomElement$k } from './notice.js';
 import { d as defineCustomElement$j } from './option.js';

package/dist/components/queryUtils.js

@@ -80,6 +80,26 @@ async function queryFeaturesByID(ids, layer, graphics, returnGeometry, outSpatia
     queryFeaturesByID(remainingIds, layer, graphics, returnGeometry, outSpatialReference) :
     Promise.resolve(graphics);
 }
+/**
+ * Query the layer for features that have the provided globalId
+ *
+ * @param globalId globalId to be used to query for a feature in a layer
+ * @param layer the layer to retrieve features from
+ *
+ * @returns Promise with the featureSet from the layer that match the provided globalId
+ */
+async function queryFeaturesByGlobalID(globalIds, layer) {
+  const globalIdField = layer.globalIdField;
+  if (!globalIdField) {
+    return [];
+  }
+  const q = layer.createQuery();
+  q.returnGeometry = false;
+  q.outFields = [layer.objectIdField];
+  q.where = globalIds.map(g => `${globalIdField} = '${g}'`).join(" or ");
+  const result = await layer.queryFeatures(q);
+  return result.features;
+}
 /**
  * Query the layer for features that intersect the provided geometry
  *
@@ -159,4 +179,4 @@ async function _intersectQuery(geometry, layer) {
   return layer.queryObjectIds(q);
 }
 
-export { queryExtent as a, queryAllIds as b, queryObjectIds as c, queryFeaturesByGeometry as d, getQueryGeoms as g, queryFeaturesByID as q };
+export { queryExtent as a, queryAllIds as b, queryFeaturesByGlobalID as c, queryObjectIds as d, queryFeaturesByGeometry as e, getQueryGeoms as g, queryFeaturesByID as q };

package/dist/components/refine-results-flow-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RefineResultsFlowItem extends Components.RefineResultsFlowItem, HTMLElement {}
+export const RefineResultsFlowItem: {
+  prototype: RefineResultsFlowItem;
+  new (): RefineResultsFlowItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/refine-results-flow-item.js

@@ -0,0 +1,75 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const refineResultsFlowItemCss = ":host{display:block}";
+
+const RefineResultsFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class RefineResultsFlowItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return refineResultsFlowItemCss; }
+}, [1, "refine-results-flow-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["refine-results-flow-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "refine-results-flow-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RefineResultsFlowItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const RefineResultsFlowItem = RefineResultsFlowItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RefineResultsFlowItem, defineCustomElement };

package/dist/components/refine-selection2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { e as ESelectionMode, b as EDrawMode, E as EWorkflowType } from './interfaces.js';
 import { e as getFeatureLayerView, f as getIdSets, i as highlightAllFeatures } from './mapViewUtils.js';
-import { d as queryFeaturesByGeometry } from './queryUtils.js';
+import { e as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$s } from './action.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$i } from './icon.js';
 import { d as defineCustomElement$h } from './input.js';
 import { d as defineCustomElement$g } from './label2.js';
 import { d as defineCustomElement$f } from './list.js';
-import { d as defineCustomElement$e } from './list-item2.js';
+import { d as defineCustomElement$e } from './list-item.js';
 import { d as defineCustomElement$d } from './loader.js';
 import { d as defineCustomElement$c } from './notice.js';
 import { d as defineCustomElement$b } from './option.js';

package/dist/components/resources.js

@@ -6,7 +6,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
+ * v1.11.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";

package/dist/components/resources2.js

@@ -6,7 +6,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
+ * v1.11.0
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources3.js

@@ -6,7 +6,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
+ * v1.11.0
  */
 const CSS = {
   container: "container",

package/dist/components/resources4.js

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

package/dist/components/resources5.js

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

package/dist/components/scrim.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * 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
+ * v1.11.0
  */
 const CSS = {
   scrim: "scrim",
@@ -86,7 +86,9 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
   // --------------------------------------------------------------------------
   render() {
     const { hasContent, loading, messages } = this;
-    return (h("div", { class: CSS.scrim }, loading ? (h("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null, h("div", { class: CSS.content, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    return (h("div", { class: CSS.scrim }, loading ? (h("calcite-loader", { label: messages.loading, scale: this.loaderScale,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.storeLoaderEl })) : null, h("div", { class: CSS.content, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   getScale(size) {
     if (size < BREAKPOINTS.s) {