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

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

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 /**
@@ -26,10 +27,11 @@ export class Stepper {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list 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() {
@@ -48,7 +50,7 @@ export class Stepper {
   componentDidLoad() {
     // if no stepper items are set as active, default to the first one
     if (!this.currentPosition) {
-      this.calciteStepperItemChange.emit({
+      this.calciteInternalStepperItemChange.emit({
         position: 0
       });
     }
@@ -66,11 +68,11 @@ export class Stepper {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteStepperItemKeyEvent(e) {
+  calciteInternalStepperItemKeyEvent(e) {
     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":
@@ -97,29 +99,28 @@ export class Stepper {
         this.focusLastItem();
         break;
     }
+    e.stopPropagation();
   }
   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, content });
+    this.items = this.sortItems();
+    this.enabledItems = this.filterItems();
+    event.stopPropagation();
   }
   updateItem(event) {
     if (event.detail.content) {
       this.requestedContent = event.detail.content;
     }
     this.currentPosition = event.detail.position;
-    this.calciteStepperItemChange.emit({
+    this.calciteInternalStepperItemChange.emit({
       position: this.currentPosition
     });
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -128,79 +129,110 @@ export class Stepper {
   //--------------------------------------------------------------------------
   /** set the next step as active */
   async nextStep() {
-    this.currentPosition =
-      this.currentPosition + 1 < this.items.length
-        ? this.currentPosition + 1
-        : this.currentPosition;
-    this.emitChangedItem();
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
   }
   /** set the previous step as active */
   async prevStep() {
-    this.currentPosition =
-      this.currentPosition - 1 >= 0 ? this.currentPosition - 1 : this.currentPosition;
-    this.emitChangedItem();
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
   }
-  /** set the requested step as active */
-  async goToStep(num) {
-    this.currentPosition = num - 1;
-    this.emitChangedItem();
+  /**
+   * set the requested step as active
+   *
+   * @param step
+   */
+  async goToStep(step) {
+    const position = step - 1;
+    if (this.currentPosition !== position) {
+      this.updateStep(position);
+    }
   }
   /** set the first step as active */
   async startStep() {
-    this.currentPosition = 0;
-    this.emitChangedItem();
+    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
   }
   /** set the last step as active */
   async endStep() {
-    this.currentPosition = this.items.length - 1;
-    this.emitChangedItem();
+    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
   }
   //--------------------------------------------------------------------------
   //
   //  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");
     this.el.insertAdjacentElement("beforeend", this.stepperContentContainer);
   }
-  emitChangedItem() {
-    this.calciteStepperItemChange.emit({
-      position: this.currentPosition
+  updateStep(position) {
+    var _a;
+    const { itemMap, items } = this;
+    this.currentPosition = position;
+    const content = (_a = itemMap.get(items[position])) === null || _a === void 0 ? void 0 : _a.content;
+    if (content) {
+      this.requestedContent = content;
+    }
+    this.calciteInternalStepperItemChange.emit({
+      position
     });
   }
   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).position - itemMap.get(b).position);
+  }
+  filterItems() {
+    return this.items.filter((item) => !item.disabled);
   }
   updateContent(content) {
     this.stepperContentContainer.innerHTML = "";
@@ -301,13 +333,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"
           }
         }
@@ -324,8 +353,8 @@ export class Stepper {
     }
   }; }
   static get events() { return [{
-      "method": "calciteStepperItemChange",
-      "name": "calciteStepperItemChange",
+      "method": "calciteInternalStepperItemChange",
+      "name": "calciteInternalStepperItemChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -337,9 +366,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 {
@@ -377,9 +411,12 @@ export class Stepper {
     },
     "goToStep": {
       "complexType": {
-        "signature": "(num: number) => Promise<void>",
+        "signature": "(step: number) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "step"
+              }],
             "text": ""
           }],
         "references": {
@@ -391,7 +428,10 @@ export class Stepper {
       },
       "docs": {
         "text": "set the requested step as active",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "step"
+          }]
       }
     },
     "startStep": {
@@ -433,19 +473,19 @@ export class Stepper {
       "methodName": "contentWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteStepperItemKeyEvent",
-      "method": "calciteStepperItemKeyEvent",
+      "name": "calciteInternalStepperItemKeyEvent",
+      "method": "calciteInternalStepperItemKeyEvent",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteStepperItemRegister",
+      "name": "calciteInternalStepperItemRegister",
       "method": "registerItem",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteStepperItemSelect",
+      "name": "calciteInternalStepperItemSelect",
       "method": "updateItem",
       "target": undefined,
       "capture": false,

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

@@ -122,6 +122,7 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+  align-self: flex-start;
   margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
 }
 
@@ -145,9 +146,7 @@
 }
 
 :host {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) {
@@ -345,4 +344,30 @@
 
 :host([layout=vertical][error]:hover:not([disabled]):not([active])) .container, :host([layout=vertical][error]:focus:not([disabled]):not([active])) .container {
   border-color: var(--calcite-ui-danger-hover);
+}
+
+@media (forced-colors: active) {
+  :host .container {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+
+  :host(:focus),
+:host(:focus-visible) {
+    outline-color: canvasText;
+  }
+
+  :host([active]) .container {
+    border-top-color: highlight;
+  }
+  :host([active]) .container .stepper-item-number {
+    color: highlight;
+  }
+  :host([active]) .container .stepper-item-icon {
+    color: highlight;
+  }
+
+  :host([layout=vertical][active]) .container {
+    border-color: highlight;
+  }
 }

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

@@ -1,9 +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-beta.83
  */
 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.
@@ -32,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.calciteInternalStepperItemKeyEvent.emit({ item: e });
+            e.preventDefault();
+            break;
+        }
+      }
+    };
+    this.emitRequestedItem = () => {
+      if (!this.disabled) {
+        this.calciteInternalStepperItemSelect.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() {
@@ -49,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,
@@ -77,44 +109,21 @@ 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) {
+    if (event.target === this.parentStepperEl ||
+      event.composedPath().includes(this.parentStepperEl)) {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
+    event.stopPropagation();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   renderIcon() {
     const path = this.active
       ? "circleF"
@@ -129,28 +138,11 @@ export class StepperItem {
     this.active = !this.disabled && this.itemPosition === this.activePosition;
   }
   registerStepperItem() {
-    this.calciteStepperItemRegister.emit({
+    this.calciteInternalStepperItemRegister.emit({
       position: this.itemPosition,
       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);
   }
@@ -359,8 +351,8 @@ export class StepperItem {
     }
   }; }
   static get events() { return [{
-      "method": "calciteStepperItemKeyEvent",
-      "name": "calciteStepperItemKeyEvent",
+      "method": "calciteInternalStepperItemKeyEvent",
+      "name": "calciteInternalStepperItemKeyEvent",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -372,13 +364,18 @@ export class StepperItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemKeyEventDetail",
+        "resolved": "StepperItemKeyEventDetail",
+        "references": {
+          "StepperItemKeyEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
       }
     }, {
-      "method": "calciteStepperItemSelect",
-      "name": "calciteStepperItemSelect",
+      "method": "calciteInternalStepperItemSelect",
+      "name": "calciteInternalStepperItemSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -390,13 +387,18 @@ export class StepperItem {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "StepperItemEventDetail",
+        "resolved": "StepperItemEventDetail",
+        "references": {
+          "StepperItemEventDetail": {
+            "location": "import",
+            "path": "../stepper/interfaces"
+          }
+        }
       }
     }, {
-      "method": "calciteStepperItemRegister",
-      "name": "calciteStepperItemRegister",
+      "method": "calciteInternalStepperItemRegister",
+      "name": "calciteInternalStepperItemRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -408,9 +410,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"; }
@@ -419,13 +426,7 @@ export class StepperItem {
       "methodName": "disabledWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteStepperItemChange",
+      "name": "calciteInternalStepperItemChange",
       "method": "updateActiveItemOnChange",
       "target": "body",
       "capture": false,

package/dist/collection/components/switch/switch.css

@@ -140,9 +140,7 @@
 
 :host {
   width: auto;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 .track {

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

@@ -1,9 +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-beta.83
  */
 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";
@@ -18,7 +19,9 @@ export class Switch {
     this.disabled = false;
     /** The scale of the switch */
     this.scale = "m";
-    /** True if the switch is initially on
+    /**
+     * True if the switch is initially on
+     *
      * @deprecated use 'checked' instead.
      */
     this.switched = false;
@@ -33,6 +36,7 @@ export class Switch {
       const key = e.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
+        e.preventDefault();
       }
     };
     this.clickHandler = () => {
@@ -95,8 +99,8 @@ export class Switch {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (h(Host, { onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "container", onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabIndex: 0 },
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
+      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 }))));