@esri/calcite-components 1.5.0-next.31 → 1.5.0-next.33

package/dist/collection/components/list/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",
@@ -10,6 +10,7 @@ export const CSS = {
   stack: "stack",
   tableContainer: "table-container",
   sticky: "sticky-pos",
+  assistiveText: "assistive-text",
 };
 export const debounceTimeout = 0;
 export const SLOTS = {

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

@@ -159,6 +159,7 @@ td:focus {
 .content-start,
 .content-end,
 .selection-container,
+.drag-container,
 .open-container {
   display: flex;
   align-items: center;

package/dist/collection/components/list-item/list-item.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
@@ -43,17 +43,7 @@ export class ListItem {
       this.hasContentEnd = slotChangeHasAssignedElement(event);
     };
     this.handleDefaultSlotChange = (event) => {
-      const { parentListEl } = this;
-      const listItemChildren = getListItemChildren(event);
-      updateListItemChildren(listItemChildren);
-      const openable = !!listItemChildren.length;
-      if (openable && parentListEl && !parentListEl.openable) {
-        parentListEl.openable = true;
-      }
-      this.openable = openable;
-      if (!openable) {
-        this.open = false;
-      }
+      this.handleOpenableChange(event.target);
     };
     this.toggleOpen = () => {
       this.open = !this.open;
@@ -153,6 +143,7 @@ export class ListItem {
     this.closed = false;
     this.description = undefined;
     this.disabled = false;
+    this.dragHandle = false;
     this.label = undefined;
     this.metadata = undefined;
     this.open = false;
@@ -193,9 +184,18 @@ export class ListItem {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleCalciteInternalListDefaultSlotChanges(event) {
+    event.stopPropagation();
+    this.handleOpenableChange(this.defaultSlotEl);
+  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
   connectedCallback() {
     connectInteractive(this);
     connectLocalized(this);
@@ -259,6 +259,9 @@ export class ListItem {
           : ICONS.selectedSingle
         : ICONS.unselected, scale: "s" })));
   }
+  renderDragHandle() {
+    return this.dragHandle ? (h("td", { class: CSS.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+  }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
@@ -320,10 +323,10 @@ export class ListItem {
         [CSS.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS.nestedContainer]: true,
         [CSS.nestedContainerHidden]: openable && !open,
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
   }
   // --------------------------------------------------------------------------
   //
@@ -345,6 +348,22 @@ export class ListItem {
       this.selectionAppearance = parentListEl.selectionAppearance;
     }
   }
+  handleOpenableChange(slotEl) {
+    if (!slotEl) {
+      return;
+    }
+    const { parentListEl } = this;
+    const listItemChildren = getListItemChildren(slotEl);
+    updateListItemChildren(listItemChildren);
+    const openable = !!listItemChildren.length;
+    if (openable && parentListEl && !parentListEl.openable) {
+      parentListEl.openable = true;
+    }
+    this.openable = openable;
+    if (!openable) {
+      this.open = false;
+    }
+  }
   static get is() { return "calcite-list-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -452,6 +471,27 @@ export class ListItem {
         "reflect": true,
         "defaultValue": "false"
       },
+      "dragHandle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, the component displays a draggable button."
+        },
+        "attribute": "drag-handle",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -848,4 +888,19 @@ export class ListItem {
         "methodName": "effectiveLocaleChange"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalListItemGroupDefaultSlotChange",
+        "method": "handleCalciteInternalListDefaultSlotChanges",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalListDefaultSlotChange",
+        "method": "handleCalciteInternalListDefaultSlotChanges",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/list-item/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",
@@ -22,6 +22,7 @@ export const CSS = {
   actionsEnd: "actions-end",
   selectionContainer: "selection-container",
   openContainer: "open-container",
+  dragContainer: "drag-container",
 };
 export const SLOTS = {
   actionsStart: "actions-start",
@@ -30,7 +31,8 @@ export const SLOTS = {
   contentEnd: "content-end",
   actionsEnd: "actions-end",
 };
-export const MAX_COLUMNS = 5;
+// Set to zero to extend until the end of the table section.
+export const MAX_COLUMNS = 0;
 export const ICONS = {
   selectedMultiple: "check-circle-f",
   selectedSingle: "circle-f",

package/dist/collection/components/list-item/utils.js

@@ -1,18 +1,22 @@
 /*!
  * 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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Build } from "@stencil/core";
+const listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector = "calcite-list-item";
-export function getListItemChildren(event) {
-  const assignedElements = event.target.assignedElements({ flatten: true });
+export function getListItemChildren(slotEl) {
+  const assignedElements = slotEl.assignedElements({ flatten: true });
   const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
     .map((group) => Array.from(group.querySelectorAll(listItemSelector)))
     .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
   const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector));
-  return [...listItemGroupChildren, ...listItemChildren];
+  const listItemListChildren = assignedElements.filter((el) => el?.matches(listSelector))
+    .map((list) => Array.from(list.querySelectorAll(listItemSelector)))
+    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+  return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
 }
 export function updateListItemChildren(listItemChildren) {
   listItemChildren.forEach((listItem) => {

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

@@ -1,9 +1,9 @@
 /*!
  * 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.5.0-next.31
+ * v1.5.0-next.33
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { MAX_COLUMNS } from "../list-item/resources";
 import { getDepth } from "../list-item/utils";
@@ -13,6 +13,14 @@ import { CSS } from "./resources";
  */
 export class ListItemGroup {
   constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleDefaultSlotChange = () => {
+      this.calciteInternalListItemGroupDefaultSlotChange.emit();
+    };
     this.disabled = false;
     this.heading = undefined;
     this.visualLevel = null;
@@ -40,7 +48,7 @@ export class ListItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { heading, visualLevel } = this;
-    return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", null)));
+    return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { onSlotchange: this.handleDefaultSlotChange })));
   }
   static get is() { return "calcite-list-item-group"; }
   static get encapsulation() { return "shadow"; }
@@ -98,5 +106,27 @@ export class ListItemGroup {
       "visualLevel": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "calciteInternalListItemGroupDefaultSlotChange",
+        "name": "calciteInternalListItemGroupDefaultSlotChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the default slot has changes in order to notify parent lists."
+        },
+        "complexType": {
+          "original": "DragEvent",
+          "resolved": "DragEvent",
+          "references": {
+            "DragEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/list-item-group/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/loader/loader.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/menu/menu.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { focusElement, focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";

package/dist/collection/components/menu-item/menu-item.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h, Host, } from "@stencil/core";
 import { getElementDir, slotChangeGetAssignedElements } from "../../utils/dom";

package/dist/collection/components/menu-item/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/modal/modal.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/modal/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   modal: "modal",

package/dist/collection/components/navigation/navigation.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h, Host, } from "@stencil/core";
 import { slotChangeHasAssignedElement } from "../../utils/dom";

package/dist/collection/components/navigation/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/navigation-logo/navigation-logo.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/navigation-logo/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/navigation-user/navigation-user.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/navigation-user/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   textContainer: "text-container",

package/dist/collection/components/notice/notice.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/notice/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const SLOTS = {
   title: "title",

package/dist/collection/components/option/option.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-group.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.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.5.0-next.31
+ * v1.5.0-next.33
  */
 import { Fragment, h, } from "@stencil/core";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";

package/dist/collection/components/pagination/resources.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.5.0-next.31
+ * v1.5.0-next.33
  */
 export const CSS = {
   page: "page",

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

@@ -88,21 +88,21 @@
 }
 
 .header {
-  border-block-end: 1px solid;
   z-index: var(--calcite-app-z-index-header);
   inline-size: 100%;
   align-items: stretch;
   justify-content: flex-start;
   background-color: var(--calcite-ui-foreground-1);
-  border-block-end-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
 }
 
 .action-bar-container {
-  border-block-end: 1px solid;
   z-index: var(--calcite-app-z-index-header);
   inline-size: 100%;
-  border-block-end-color: var(--calcite-ui-border-3);
+}
+
+.bottom-separator {
+  border-block-end: 1px solid var(--calcite-ui-border-3);
 }
 
 .action-bar-container ::slotted(calcite-action-bar) {
@@ -158,11 +158,8 @@
 }
 
 .content-wrapper {
-  overflow: auto;
-}
-
-.content-height {
   block-size: 100%;
+  overflow: auto;
 }
 
 .content-container {
@@ -175,14 +172,13 @@
 }
 
 .footer {
-  border-block-start: 1px solid;
   display: flex;
   inline-size: 100%;
   justify-content: space-evenly;
   background-color: var(--calcite-ui-foreground-1);
-  border-block-start-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
   padding: var(--calcite-panel-footer-padding);
+  border-block-start: 1px solid var(--calcite-ui-border-3);
 }
 
 .fab-container {