@esri/calcite-components 1.0.0-next.461 → 1.0.0-next.464

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.0.0-next.461
+ * v1.0.0-next.464
  */
 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.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/slider/slider.css

@@ -301,6 +301,33 @@
   height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
+@media (forced-colors: active) {
+  .thumb {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+
+  .handle{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .thumb:focus .handle,
+.thumb .handle-extension,
+.thumb:hover .handle-extension,
+.thumb:focus .handle-extension,
+.thumb:active .handle-extension {
+    background-color: canvasText;
+  }
+
+  .track {
+    background-color: canvasText;
+  }
+
+  .track__range {
+    background-color: highlight;
+  }
+}
 .tick{
   position: absolute;
   height: 0.25rem;

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.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } 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.0.0-next.461
+ * v1.0.0-next.464
  */
 export const CSS = {
   sortItem: "sort-item",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";

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.0.0-next.461
+ * v1.0.0-next.464
  */
 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.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/stepper/interfaces.js

@@ -0,0 +1,6 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.464
+ */
+export {};

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.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 /**
@@ -27,10 +27,12 @@ export class Stepper {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Stepper items */
+    /** map of Stepper items */
+    this.itemMap = new Map();
+    /** list of sorted Stepper items */
     this.items = [];
-    /** sorted list of Stepper items */
-    this.sortedItems = [];
+    /** list of enabled Stepper items */
+    this.enabledItems = [];
   }
   // watch for removal of disabled to register step
   contentWatcher() {
@@ -71,7 +73,7 @@ export class Stepper {
     const item = e.detail.item;
     const itemToFocus = e.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.sortedItems.length - 1;
+    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
     switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
@@ -100,18 +102,14 @@ export class Stepper {
     }
   }
   registerItem(event) {
-    const item = {
-      item: event.target,
-      position: event.detail.position,
-      content: event.detail.content
-    };
-    if (item.content && item.item.active) {
-      this.requestedContent = item.content;
+    const item = event.target;
+    const { content, position } = event.detail;
+    if (content && item.active) {
+      this.requestedContent = content;
     }
-    if (!this.items.includes(item)) {
-      this.items.push(item);
-    }
-    this.sortedItems = this.sortItems();
+    this.itemMap.set(item, position);
+    this.items = this.sortItems();
+    this.enabledItems = this.filterItems();
   }
   updateItem(event) {
     if (event.detail.content) {
@@ -129,31 +127,46 @@ export class Stepper {
   //--------------------------------------------------------------------------
   /** set the next step as active */
   async nextStep() {
-    this.currentPosition =
-      this.currentPosition + 1 < this.items.length
-        ? this.currentPosition + 1
-        : this.currentPosition;
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the previous step as active */
   async prevStep() {
-    this.currentPosition =
-      this.currentPosition - 1 >= 0 ? this.currentPosition - 1 : this.currentPosition;
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the requested step as active */
-  async goToStep(num) {
-    this.currentPosition = num - 1;
-    this.emitChangedItem();
+  async goToStep(step) {
+    const position = step - 1;
+    if (this.currentPosition !== position) {
+      this.currentPosition = position;
+      this.emitChangedItem();
+    }
   }
   /** set the first step as active */
   async startStep() {
-    this.currentPosition = 0;
+    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   /** set the last step as active */
   async endStep() {
-    this.currentPosition = this.items.length - 1;
+    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.currentPosition = enabledStepIndex;
     this.emitChangedItem();
   }
   //--------------------------------------------------------------------------
@@ -161,6 +174,17 @@ export class Stepper {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  getEnabledStepIndex(startIndex, direction = "next") {
+    var _a;
+    const { items, currentPosition } = this;
+    let newIndex = startIndex;
+    while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+      newIndex = newIndex + (direction === "previous" ? -1 : 1);
+    }
+    return newIndex !== currentPosition && newIndex < items.length && newIndex >= 0
+      ? newIndex
+      : null;
+  }
   addHorizontalContentContainer() {
     this.stepperContentContainer = document.createElement("div");
     this.stepperContentContainer.classList.add("calcite-stepper-content");
@@ -172,36 +196,35 @@ export class Stepper {
     });
   }
   focusFirstItem() {
-    const firstItem = this.sortedItems[0];
+    const firstItem = this.enabledItems[0];
     this.focusElement(firstItem);
   }
   focusLastItem() {
-    const lastItem = this.sortedItems[this.sortedItems.length - 1];
+    const lastItem = this.enabledItems[this.enabledItems.length - 1];
     this.focusElement(lastItem);
   }
   focusNextItem(e) {
     const index = this.itemIndex(e);
-    const nextItem = this.sortedItems[index + 1] || this.sortedItems[0];
+    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
     this.focusElement(nextItem);
   }
   focusPrevItem(e) {
     const index = this.itemIndex(e);
-    const prevItem = this.sortedItems[index - 1] || this.sortedItems[this.sortedItems.length - 1];
+    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
     this.focusElement(prevItem);
   }
   itemIndex(e) {
-    return this.sortedItems.indexOf(e);
+    return this.enabledItems.indexOf(e);
   }
   focusElement(item) {
-    const target = item;
-    target.focus();
+    item.focus();
   }
   sortItems() {
-    const items = Array.from(this.items)
-      .filter((a) => !a.item.disabled)
-      .sort((a, b) => a.position - b.position)
-      .map((a) => a.item);
-    return [...Array.from(new Set(items))];
+    const { itemMap } = this;
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a) - itemMap.get(b));
+  }
+  filterItems() {
+    return this.items.filter((item) => !item.disabled);
   }
   updateContent(content) {
     this.stepperContentContainer.innerHTML = "";
@@ -302,13 +325,10 @@ export class Stepper {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "HTMLElement[] | NodeListOf<any>",
-        "resolved": "HTMLElement[] | NodeListOf<any>",
+        "original": "Node[]",
+        "resolved": "Node[]",
         "references": {
-          "HTMLElement": {
-            "location": "global"
-          },
-          "NodeListOf": {
+          "Node": {
             "location": "global"
           }
         }
@@ -338,9 +358,14 @@ export class Stepper {
         "text": "This event fires when the active stepper item has changed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemChangeEventDetail",
+        "resolved": "StepperItemChangeEventDetail",
+        "references": {
+          "StepperItemChangeEventDetail": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {
@@ -378,7 +403,7 @@ export class Stepper {
     },
     "goToStep": {
       "complexType": {
-        "signature": "(num: number) => Promise<void>",
+        "signature": "(step: number) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""

package/dist/collection/components/stepper-item/stepper-item.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
@@ -33,6 +33,50 @@ export class StepperItem {
     /** the scale of the item */
     /** @internal */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (e) => {
+      if (!this.disabled && e.target === this.el) {
+        switch (e.key) {
+          case " ":
+          case "Enter":
+            this.emitRequestedItem();
+            e.preventDefault();
+            break;
+          case "ArrowUp":
+          case "ArrowDown":
+          case "ArrowLeft":
+          case "ArrowRight":
+          case "Home":
+          case "End":
+            this.calciteStepperItemKeyEvent.emit({ item: e });
+            e.preventDefault();
+            break;
+        }
+      }
+    };
+    this.emitRequestedItem = () => {
+      if (!this.disabled) {
+        this.calciteStepperItemSelect.emit({
+          position: this.itemPosition,
+          content: this.itemContent
+        });
+      }
+    };
+    this.setItemContent = (event) => {
+      this.itemPosition = this.getItemPosition();
+      const itemContent = event.target.assignedNodes({ flatten: true });
+      if (itemContent.length) {
+        this.itemContent = itemContent;
+      }
+      this.registerStepperItem();
+      if (this.active) {
+        this.emitRequestedItem();
+      }
+    };
   }
   // watch for removal of disabled to register step
   disabledWatcher() {
@@ -50,24 +94,11 @@ export class StepperItem {
     this.scale = getElementProp(this.el, "scale", "m");
     this.parentStepperEl = this.el.parentElement;
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.itemContent = this.getItemContent();
-    this.registerStepperItem();
-    if (this.active) {
-      this.emitRequestedItem();
-    }
-  }
-  componentDidUpdate() {
-    if (this.active) {
-      this.emitRequestedItem();
-    }
-  }
   componentDidRender() {
     updateHostInteraction(this, true);
   }
   render() {
-    return (h(Host, { "aria-expanded": this.active.toString(), onClick: () => this.emitRequestedItem() },
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitRequestedItem, onKeyDown: this.keyDownHandler },
       h("div", { class: "container" },
         h("div", { class: "stepper-item-header" },
           this.icon ? this.renderIcon() : null,
@@ -78,33 +109,13 @@ export class StepperItem {
             h("span", { class: "stepper-item-title" }, this.itemTitle),
             h("span", { class: "stepper-item-subtitle" }, this.itemSubtitle))),
         h("div", { class: "stepper-item-content" },
-          h("slot", null)))));
+          h("slot", { onSlotchange: this.setItemContent })))));
   }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    if (!this.disabled && e.target === this.el) {
-      switch (e.key) {
-        case " ":
-        case "Enter":
-          this.emitRequestedItem();
-          e.preventDefault();
-          break;
-        case "ArrowUp":
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "Home":
-        case "End":
-          this.calciteStepperItemKeyEvent.emit({ item: e });
-          e.preventDefault();
-          break;
-      }
-    }
-  }
   updateActiveItemOnChange(event) {
     if (event.target === this.parentStepperEl ||
       event.composedPath().includes(this.parentStepperEl)) {
@@ -112,11 +123,6 @@ export class StepperItem {
       this.determineActiveItem();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   renderIcon() {
     const path = this.active
       ? "circleF"
@@ -136,23 +142,6 @@ export class StepperItem {
       content: this.itemContent
     });
   }
-  emitRequestedItem() {
-    if (!this.disabled) {
-      this.calciteStepperItemSelect.emit({
-        position: this.itemPosition,
-        content: this.itemContent
-      });
-    }
-  }
-  getItemContent() {
-    var _a;
-    // todo: Remove IE/Edge specific code.
-    return ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("slot"))
-      ? this.el.shadowRoot.querySelector("slot").assignedNodes({ flatten: true })
-      : this.el.querySelector(".stepper-item-content")
-        ? this.el.querySelector(".stepper-item-content").childNodes
-        : null;
-  }
   getItemPosition() {
     return Array.prototype.indexOf.call(this.parentStepperEl.querySelectorAll("calcite-stepper-item"), this.el);
   }
@@ -374,9 +363,14 @@ export class StepperItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemKeyEventDetail",
+        "resolved": "StepperItemKeyEventDetail",
+        "references": {
+          "StepperItemKeyEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteStepperItemSelect",
@@ -392,9 +386,14 @@ export class StepperItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemEventDetail",
+        "resolved": "StepperItemEventDetail",
+        "references": {
+          "StepperItemEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteStepperItemRegister",
@@ -410,9 +409,14 @@ export class StepperItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemEventDetail",
+        "resolved": "StepperItemEventDetail",
+        "references": {
+          "StepperItemEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }
@@ -421,12 +425,6 @@ export class StepperItem {
       "methodName": "disabledWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "calciteStepperItemChange",
       "method": "updateActiveItemOnChange",
       "target": "body",

package/dist/collection/components/switch/switch.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
-import { focusElement } from "../../utils/dom";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -98,7 +98,7 @@ export class Switch {
   // --------------------------------------------------------------------------
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 },
+      h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 },
         h("div", { class: "track" },
           h("div", { class: "handle" })),
         h(HiddenFormInputSlot, { component: this }))));

package/dist/collection/components/tab/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.461
+ * v1.0.0-next.464
  */
 export {};

package/dist/collection/components/tab/tab.js

@@ -1,11 +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-next.461
+ * v1.0.0-next.464
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { nodeListToArray } from "../../utils/dom";
+import { nodeListToArray, toAriaBoolean } from "../../utils/dom";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -26,7 +26,7 @@ export class Tab {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (h(Host, { "aria-expanded": this.active.toString(), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" },
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" },
       h("section", null,
         h("slot", null))));
   }

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.0.0-next.461
+ * v1.0.0-next.464
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";

package/dist/collection/components/tab-title/tab-title.js

@@ -1,11 +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-next.461
+ * v1.0.0-next.464
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -84,7 +84,7 @@ export class TabTitle {
     const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab" },
+    return (h(Host, { "aria-controls": this.controls, "aria-expanded": toAriaBoolean(this.active), id: id, role: "tab" },
       h("a", { class: {
           container: true,
           "container--has-text": this.hasText
@@ -419,7 +419,7 @@ export class TabTitle {
             "name": "see",
             "text": "[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
           }],
-        "text": "Fires when a specific tab is activated (`event.details`)"
+        "text": "Fires when a specific tab is activated. Emits the \"tab\" property or the index position."
       },
       "complexType": {
         "original": "TabChangeEventDetail",