@esri/calcite-components 1.4.0-next.22 → 1.4.0-next.24

package/dist/collection/components/segmented-control-item/segmented-control-item.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/select/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { Fragment, h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/shell/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/shell-center-row/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/shell-panel/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { forceUpdate, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/slider/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   handleLabel: "handle__label",

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

package/dist/collection/components/sortable-list/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   sortItem: "sort-item",

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

@@ -1,13 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h } from "@stencil/core";
-import Sortable from "sortablejs";
 import { updateHostInteraction } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 import { CSS } from "./resources";
+import { connectSortableComponent, disconnectSortableComponent, onSortingStart, onSortingEnd } from "../../utils/sortableComponent";
+import { focusElement } from "../../utils/dom";
 /**
  * @slot - A slot for adding sortable items.
  */
@@ -15,9 +16,7 @@ export class SortableList {
   constructor() {
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => {
-      this.cleanUpDragAndDrop();
-      this.items = Array.from(this.el.children);
-      this.setUpDragAndDrop();
+      this.setUpSorting();
     });
     this.dragSelector = undefined;
     this.group = undefined;
@@ -25,7 +24,6 @@ export class SortableList {
     this.layout = "vertical";
     this.disabled = false;
     this.loading = false;
-    this.handleActivated = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -33,13 +31,12 @@ export class SortableList {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.items = Array.from(this.el.children);
-    this.setUpDragAndDrop();
+    this.setUpSorting();
     this.beginObserving();
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
-    this.cleanUpDragAndDrop();
+    disconnectSortableComponent(this);
+    this.endObserving();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -54,7 +51,9 @@ export class SortableList {
   // --------------------------------------------------------------------------
   handleNudgeEvent(event) {
     const { direction } = event.detail;
-    const handle = event.target;
+    const handle = event
+      .composedPath()
+      .find((el) => el.matches(this.handleSelector));
     const sortItem = this.items.find((item) => {
       return item.contains(handle) || event.composedPath().includes(item);
     });
@@ -81,7 +80,7 @@ export class SortableList {
         buddyIndex = startingIndex + 2;
       }
     }
-    this.mutationObserver?.disconnect();
+    this.endObserving();
     if (appendInstead) {
       sortItem.parentElement.appendChild(sortItem);
     }
@@ -89,42 +88,43 @@ export class SortableList {
       sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
     this.items = Array.from(this.el.children);
-    handle.activated = true;
-    handle.setFocus();
     this.beginObserving();
+    requestAnimationFrame(() => focusElement(handle));
+    if ("activated" in handle) {
+      handle.activated = true;
+    }
   }
-  setUpDragAndDrop() {
-    this.cleanUpDragAndDrop();
-    const options = {
+  setUpSorting() {
+    const { dragSelector, group, handleSelector } = this;
+    this.items = Array.from(this.el.children);
+    const sortableOptions = {
       dataIdAttr: "id",
-      group: this.group,
-      handle: this.handleSelector,
-      // Changed sorting within list
-      onUpdate: () => {
-        this.items = Array.from(this.el.children);
-        this.calciteListOrderChange.emit();
-      },
-      // Element dragging started
+      group,
+      handle: handleSelector,
       onStart: () => {
-        this.mutationObserver?.disconnect();
+        this.endObserving();
+        onSortingStart(this);
       },
-      // Element dragging ended
       onEnd: () => {
+        onSortingEnd(this);
         this.beginObserving();
+      },
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
       }
     };
-    if (this.dragSelector) {
-      options.draggable = this.dragSelector;
+    if (dragSelector) {
+      sortableOptions.draggable = dragSelector;
     }
-    this.sortable = Sortable.create(this.el, options);
-  }
-  cleanUpDragAndDrop() {
-    this.sortable?.destroy();
-    this.sortable = null;
+    connectSortableComponent(this, sortableOptions);
   }
   beginObserving() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
+  endObserving() {
+    this.mutationObserver?.disconnect();
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -266,11 +266,6 @@ export class SortableList {
       }
     };
   }
-  static get states() {
-    return {
-      "handleActivated": {}
-    };
-  }
   static get events() {
     return [{
         "method": "calciteListOrderChange",

package/dist/collection/components/split-button/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

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

@@ -0,0 +1,19 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.0-next.24
+ */
+export const CSS = {
+  container: "container",
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  content: "content",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
+};
+export const SLOTS = {
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
+};

package/dist/collection/components/stack/stack.css

@@ -0,0 +1,197 @@
+/* mixins & extensions */
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes in-down {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, -5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-scale {
+  0% {
+    opacity: 0;
+    transform: scale3D(0.95, 0.95, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3D(1, 1, 1);
+  }
+}
+:root {
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
+}
+
+.calcite-animate {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
+/* helper to properly scale internal durations */
+/**
+* Currently only used in Checkbox.
+*/
+:root {
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) .content {
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host([disabled]) .content *,
+:host([disabled]) .content ::slotted(*) {
+  pointer-events: none;
+}
+
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-stack-padding-inline: Specifies the inline padding of the component's content.
+* @prop --calcite-stack-padding-block: Specifies the block padding of the component's content.
+*/
+:host {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+.container {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: stretch;
+  font-family: var(--calcite-sans-family);
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-2);
+}
+
+.content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1.375;
+  padding-inline: var(--calcite-stack-padding-inline, 0.75rem);
+  padding-block: var(--calcite-stack-padding-block, 0.5rem);
+}
+
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
+.content-start,
+.content-end {
+  flex: 0 1 auto;
+}
+
+.actions-start,
+.actions-end,
+.content-start,
+.content-end {
+  display: flex;
+  align-items: center;
+}
+
+.content-start ::slotted(calcite-icon),
+.content-end ::slotted(calcite-icon) {
+  margin-inline: 0.75rem;
+  align-self: center;
+}
+
+.actions-start ::slotted(calcite-action),
+.actions-end ::slotted(calcite-action) {
+  align-self: stretch;
+  color: inherit;
+}
+
+[hidden] {
+  display: none;
+}

package/dist/collection/components/stack/stack.js

@@ -0,0 +1,110 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.0-next.24
+ */
+import { h, Host } from "@stencil/core";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { CSS, SLOTS } from "./resources";
+/**
+ * @slot - A slot for adding content.
+ * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
+ * @slot content-start - A slot for adding non-actionable elements before content of the component.
+ * @slot content-end - A slot for adding non-actionable elements after content of the component.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
+ */
+export class Stack {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleActionsStartSlotChange = (event) => {
+      this.hasActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleActionsEndSlotChange = (event) => {
+      this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentStartSlotChange = (event) => {
+      this.hasContentStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentEndSlotChange = (event) => {
+      this.hasContentEnd = slotChangeHasAssignedElement(event);
+    };
+    this.disabled = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsStart() {
+    const { hasActionsStart } = this;
+    return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { hasActionsEnd } = this;
+    return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderDefaultContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+  }
+  static get is() { return "calcite-stack"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stack.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stack.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, content interaction is prevented and displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasActionsStart": {},
+      "hasActionsEnd": {},
+      "hasContentStart": {},
+      "hasContentEnd": {}
+    };
+  }
+}

package/dist/collection/components/stepper/stepper.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h } from "@stencil/core";
 import { focusElementInGroup } from "../../utils/dom";

package/dist/collection/components/stepper-item/stepper-item.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/switch/switch.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tab/tab.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h, Host } from "@stencil/core";
 import { nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tab-nav/tab-nav.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.4.0-next.22
+ * v1.4.0-next.24
  */
 import { h, Host } from "@stencil/core";
 import { filterDirectChildren, focusElementInGroup, getElementDir } from "../../utils/dom";

package/dist/collection/components/tab-title/resources.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.4.0-next.22
+ * v1.4.0-next.24
  */
 export const CSS = {
   container: "container",