@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

package/dist/components/calcite-sortable-list.d.ts

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

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

@@ -0,0 +1,190 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { S as Sortable } from './sortable.esm.js';
+import { c as createObserver } from './observers.js';
+
+const CSS = {
+  sortItem: "sort-item",
+  container: "container",
+  containerHorizontal: "container--horizontal",
+  containerVertical: "container--vertical"
+};
+
+const calciteSortableListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex}.container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}.container--vertical{-ms-flex-direction:column;flex-direction:column}.container--horizontal{-ms-flex-direction:row;flex-direction:row}";
+
+let CalciteSortableList$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
+    /**
+     * The selector for the handle elements.
+     */
+    this.handleSelector = "calcite-handle";
+    /**
+     * Indicates the horizontal or vertical orientation of the component.
+     */
+    this.layout = "vertical";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    this.handleActivated = false;
+    this.items = [];
+    this.mutationObserver = createObserver("mutation", () => {
+      this.cleanUpDragAndDrop();
+      this.items = Array.from(this.el.children);
+      this.setUpDragAndDrop();
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.items = Array.from(this.el.children);
+    this.setUpDragAndDrop();
+    this.beginObserving();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.cleanUpDragAndDrop();
+  }
+  calciteHandleNudgeHandler(event) {
+    var _a;
+    const sortItem = this.items.find((item) => {
+      return item.contains(event.detail.handle) || event.composedPath().includes(item);
+    });
+    const lastIndex = this.items.length - 1;
+    const startingIndex = this.items.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    switch (event.detail.direction) {
+      case "up":
+        event.preventDefault();
+        if (startingIndex === 0) {
+          appendInstead = true;
+        }
+        else {
+          buddyIndex = startingIndex - 1;
+        }
+        break;
+      case "down":
+        event.preventDefault();
+        if (startingIndex === lastIndex) {
+          buddyIndex = 0;
+        }
+        else if (startingIndex === lastIndex - 1) {
+          appendInstead = true;
+        }
+        else {
+          buddyIndex = startingIndex + 2;
+        }
+        break;
+      default:
+        return;
+    }
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    if (appendInstead) {
+      sortItem.parentElement.appendChild(sortItem);
+    }
+    else {
+      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+    }
+    this.items = Array.from(this.el.children);
+    event.detail.handle.activated = true;
+    event.detail.handle.setFocus();
+    this.beginObserving();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  setUpDragAndDrop() {
+    this.cleanUpDragAndDrop();
+    const options = {
+      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
+      onStart: () => {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      },
+      // Element dragging ended
+      onEnd: () => {
+        this.beginObserving();
+      }
+    };
+    if (this.dragSelector) {
+      options.draggable = this.dragSelector;
+    }
+    this.sortable = Sortable.create(this.el, options);
+  }
+  cleanUpDragAndDrop() {
+    var _a;
+    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.sortable = null;
+  }
+  beginObserving() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { layout } = this;
+    const horizontal = layout === "horizontal" || false;
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerVertical]: !horizontal,
+        [CSS.containerHorizontal]: horizontal
+      } }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return calciteSortableListCss; }
+};
+CalciteSortableList$1 = /*@__PURE__*/ proxyCustomElement(CalciteSortableList$1, [1, "calcite-sortable-list", {
+    "dragSelector": [1, "drag-selector"],
+    "group": [1],
+    "handleSelector": [1, "handle-selector"],
+    "layout": [1],
+    "disabled": [516],
+    "loading": [516],
+    "handleActivated": [32]
+  }, [[0, "calciteHandleNudge", "calciteHandleNudgeHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-sortable-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-sortable-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteSortableList$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteSortableList = CalciteSortableList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteSortableList, defineCustomElement };

package/dist/components/calcite-split-button.d.ts

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

package/dist/components/calcite-split-button.js

@@ -0,0 +1,127 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as getElementDir } from './dom.js';
+import { d as defineCustomElement$5 } from './calcite-button2.js';
+import { d as defineCustomElement$4 } from './calcite-dropdown2.js';
+import { d as defineCustomElement$3 } from './calcite-icon2.js';
+import { d as defineCustomElement$2 } from './calcite-loader2.js';
+
+const CSS = {
+  container: "split-button__container",
+  dividerContainer: "split-button__divider-container",
+  divider: "split-button__divider",
+  widthAuto: "width-auto",
+  widthHalf: "width-half",
+  widthFull: "width-full"
+};
+
+const calciteSplitButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host .split-button__container{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{height:100%;vertical-align:top}:host([appearance=solid]):host([color=blue]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=solid]):host([color=red]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=solid]):host([color=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host([appearance=solid]):host([color=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=transparent]):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=transparent]):host([color=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1)}:host([appearance=transparent]):host([color=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=clear]),:host([appearance=transparent]){--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=clear]):host([color=blue]),:host([appearance=outline]):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=clear]):host([color=red]),:host([appearance=outline]):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=clear]):host([color=neutral]),:host([appearance=outline]):host([color=neutral]){--calcite-split-button-divider:var(--calcite-ui-foreground-3)}:host([appearance=clear]):host([color=inverse]),:host([appearance=outline]):host([color=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.width-auto{width:auto}.width-half{width:50%}.width-full{width:100%}.split-button__divider-container{width:1px;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-webkit-transition:0.15s ease-in-out;transition:0.15s ease-in-out;background-color:var(--calcite-split-button-background)}.split-button__divider{width:1px;margin-top:0.25rem;margin-bottom:0.25rem;display:inline-block;background-color:var(--calcite-split-button-divider)}:host([appearance=outline]) .split-button__divider-container,:host([appearance=clear]) .split-button__divider-container{border-top:1px solid var(--calcite-split-button-divider);border-bottom:1px solid var(--calcite-split-button-divider)}:host([appearance=outline]):hover .split-button__divider-container,:host([appearance=clear]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline]:hover) .split-button__divider-container,:host([appearance=clear]:hover) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline]:focus-within):host([color=blue]),:host([appearance=clear]:focus-within):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline]:focus-within):host([color=red]),:host([appearance=clear]:focus-within):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline]:focus-within) .split-button__divider-container,:host([appearance=clear]:focus-within) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}";
+
+let CalciteSplitButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 7);
+    this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 7);
+    /** specify the appearance style of the button, defaults to solid. */
+    this.appearance = "solid";
+    /** specify the color of the control, defaults to blue */
+    this.color = "blue";
+    /** is the control disabled  */
+    this.disabled = false;
+    /**
+     * Is the dropdown currently active or not
+     * @internal
+     */
+    this.active = false;
+    /** specify the icon used for the dropdown menu, defaults to chevron */
+    this.dropdownIconType = "chevron";
+    /** optionally add a calcite-loader component to the control,
+     disabling interaction. with the primary button */
+    this.loading = false;
+    /** specify the scale of the control, defaults to m */
+    this.scale = "m";
+    /** specify the width of the button, defaults to auto */
+    this.width = "auto";
+    this.calciteSplitButtonPrimaryClickHandler = (e) => this.calciteSplitButtonPrimaryClick.emit(e);
+    this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    const widthClasses = {
+      [CSS.container]: true,
+      [CSS.widthAuto]: this.width === "auto",
+      [CSS.widthHalf]: this.width === "half",
+      [CSS.widthFull]: this.width === "full"
+    };
+    const buttonWidth = this.width === "auto" ? "auto" : "full";
+    return (h("div", { class: widthClasses, dir: dir }, h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { active: this.active, dir: dir, onClick: this.calciteSplitButtonSecondaryClickHandler, placement: "bottom-trailing", scale: this.scale, width: this.scale }, h("calcite-button", { appearance: this.appearance, color: this.color, dir: dir, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary" }), h("slot", null))));
+  }
+  get dropdownIcon() {
+    return this.dropdownIconType === "chevron"
+      ? "chevronDown"
+      : this.dropdownIconType === "caret"
+        ? "caretDown"
+        : this.dropdownIconType === "ellipsis"
+          ? "ellipsis"
+          : "handle-vertical";
+  }
+  get el() { return this; }
+  static get style() { return calciteSplitButtonCss; }
+};
+CalciteSplitButton$1 = /*@__PURE__*/ proxyCustomElement(CalciteSplitButton$1, [1, "calcite-split-button", {
+    "appearance": [513],
+    "color": [513],
+    "disabled": [516],
+    "active": [516],
+    "dropdownIconType": [513, "dropdown-icon-type"],
+    "dropdownLabel": [513, "dropdown-label"],
+    "loading": [516],
+    "primaryIconEnd": [513, "primary-icon-end"],
+    "primaryIconFlipRtl": [513, "primary-icon-flip-rtl"],
+    "primaryIconStart": [513, "primary-icon-start"],
+    "primaryLabel": [513, "primary-label"],
+    "primaryText": [513, "primary-text"],
+    "scale": [513],
+    "width": [513]
+  }]);
+function defineCustomElement$1() {
+  const components = ["calcite-split-button", "calcite-button", "calcite-dropdown", "calcite-icon", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-split-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteSplitButton$1);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteSplitButton = CalciteSplitButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteSplitButton, defineCustomElement };

package/dist/components/calcite-stepper-item.d.ts

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

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

@@ -0,0 +1,189 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { g as getKey } from './key.js';
+import { d as defineCustomElement$2 } from './calcite-icon2.js';
+
+const calciteStepperItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-right:0.25rem}:host([scale=s]) .stepper-item-subtitle{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-right:0.5rem}:host([scale=m]) .stepper-item-subtitle{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-right:0.75rem}:host([scale=l]) .stepper-item-subtitle{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;position:relative;margin-bottom:var(--calcite-stepper-item-spacing-unit-s)}:host .container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:column;flex-direction:column;color:var(--calcite-ui-text-3);text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative;border-width:0;border-top-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);cursor:pointer;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.calcite--rtl{margin-left:var(--calcite-stepper-item-spacing-unit-l);margin-right:0}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host .stepper-item-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;cursor:pointer}:host .stepper-item-content,:host .stepper-item-header{padding:var(--calcite-stepper-item-spacing-unit-l) var(--calcite-stepper-item-spacing-unit-m);padding-left:0;text-align:left;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.calcite--rtl .stepper-item-content,.calcite--rtl .stepper-item-header{padding-right:0;text-align:right;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-left:initial}:host .stepper-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{-ms-flex-direction:column;flex-direction:column;width:100%;display:none;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-right:var(--calcite-stepper-item-spacing-unit-m);color:var(--calcite-ui-text-3);margin-top:1px;opacity:var(--calcite-ui-opacity-disabled);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:flex-start;height:0.75rem;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.calcite--rtl .stepper-item-icon{margin-left:var(--calcite-stepper-item-spacing-unit-l);margin-right:0}:host .stepper-item-header-text{margin-right:auto;-ms-flex-direction:column;flex-direction:column;text-align:initial}.calcite--rtl .stepper-item-header-text{margin-left:auto;margin-right:0}:host .stepper-item-title,:host .stepper-item-subtitle{display:-ms-flexbox;display:flex;width:100%}:host .stepper-item-title{color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-medium);margin-bottom:0.25rem}:host .stepper-item-subtitle{color:var(--calcite-ui-text-3)}.calcite--rtl .stepper-item-title{margin-right:0;margin-left:auto}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-right:var(--calcite-stepper-item-spacing-unit-m)}.calcite--rtl .stepper-item-number{margin-left:var(--calcite-stepper-item-spacing-unit-m);margin-right:initial}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]),:host([disabled]) *{cursor:not-allowed;pointer-events:auto}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-ui-brand)}:host([error]) .container{border-top-color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-ui-danger)}:host(:hover:not([disabled]):not([active])) .container,:host(:focus:not([disabled]):not([active])) .container{border-top-color:var(--calcite-ui-brand)}:host(:hover:not([disabled]):not([active])) .container .stepper-item-title,:host(:focus:not([disabled]):not([active])) .container .stepper-item-title{color:var(--calcite-ui-text-1)}:host(:hover:not([disabled]):not([active])) .container .stepper-item-subtitle,:host(:focus:not([disabled]):not([active])) .container .stepper-item-subtitle{color:var(--calcite-ui-text-2)}:host([error]:hover:not([disabled]):not([active])) .container,:host([error]:focus:not([disabled]):not([active])) .container{border-top-color:var(--calcite-ui-danger-hover)}:host([active]) .container{border-top-color:var(--calcite-ui-brand)}:host([active]) .container .stepper-item-title{color:var(--calcite-ui-text-1)}:host([active]) .container .stepper-item-subtitle{color:var(--calcite-ui-text-2)}:host([active]) .container .stepper-item-number{color:var(--calcite-ui-brand)}:host([active]) .container .stepper-item-icon{color:var(--calcite-ui-brand);opacity:1}:host([layout=vertical]) .container{-ms-flex:1 1 auto;flex:1 1 auto;border-top-width:0;border-left-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-top:0;padding-bottom:0;padding-right:0;margin-left:0;margin-right:0;margin-top:0;padding-left:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{margin-top:1px;margin-right:0;margin-bottom:0;margin-left:auto;-ms-flex-order:3;order:3;padding-left:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=vertical]) .container .stepper-item-header{padding-right:0}:host([layout=vertical]) .container .stepper-item-content{padding:0}:host([layout=vertical][active]) .container .stepper-item-content{display:-ms-flexbox;display:flex}:host([layout=vertical][active]) .container .stepper-item-content ::slotted(:last-child){margin-bottom:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .calcite--rtl{border-left-width:0;border-right-width:2px;border-color:var(--calcite-ui-border-3);padding-top:0;padding-bottom:0;padding-left:0;padding-right:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .calcite--rtl .stepper-item-icon{margin-bottom:0;margin-left:0;padding-left:0;padding-right:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .calcite--rtl .stepper-item-header{padding-left:0;padding-right:intial}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([active])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([active])) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-ui-danger)}:host([layout=vertical][active]) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical]:hover:not([disabled]):not([active])) .container,:host([layout=vertical]:focus:not([disabled]):not([active])) .container{border-color:rgba(0, 122, 194, 0.5)}: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)}";
+
+let CalciteStepperItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteStepperItemKeyEvent = createEvent(this, "calciteStepperItemKeyEvent", 7);
+    this.calciteStepperItemSelect = createEvent(this, "calciteStepperItemSelect", 7);
+    this.calciteStepperItemRegister = createEvent(this, "calciteStepperItemRegister", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** is the step active */
+    this.active = false;
+    /** has the step been completed */
+    this.complete = false;
+    /** does the step contain an error that needs to be resolved by the user */
+    this.error = false;
+    /** is the step disabled and not navigable to by a user */
+    this.disabled = false;
+    /** should the items display an icon based on status */
+    /** @internal */
+    this.icon = false;
+    /** optionally display the step number next to the title and subtitle */
+    /** @internal */
+    this.numbered = false;
+    /** the scale of the item */
+    /** @internal */
+    this.scale = "m";
+  }
+  // watch for removal of disabled to register step
+  disabledWatcher() {
+    this.registerStepperItem();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.icon = getElementProp(this.el, "icon", false);
+    this.numbered = getElementProp(this.el, "numbered", false);
+    this.layout = getElementProp(this.el, "layout", false);
+    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();
+    }
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    return (h(Host, { "aria-expanded": this.active.toString(), onClick: () => this.emitRequestedItem(), tabindex: this.disabled ? null : 0 }, h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "stepper-item-header" }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: "stepper-item-number" }, this.getItemPosition() + 1, ".")) : null, h("div", { class: "stepper-item-header-text" }, 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)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(e) {
+    if (!this.disabled && e.target === this.el) {
+      switch (getKey(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) {
+      this.activePosition = event.detail.position;
+      this.determineActiveItem();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  renderIcon() {
+    const path = this.active
+      ? "circleF"
+      : this.error
+        ? "exclamationMarkCircleF"
+        : this.complete
+          ? "checkCircleF"
+          : "circle";
+    return h("calcite-icon", { class: "stepper-item-icon", icon: path, scale: "s" });
+  }
+  determineActiveItem() {
+    this.active = !this.disabled && this.itemPosition === this.activePosition;
+  }
+  registerStepperItem() {
+    this.calciteStepperItemRegister.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);
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "disabled": ["disabledWatcher"]
+  }; }
+  static get style() { return calciteStepperItemCss; }
+};
+CalciteStepperItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteStepperItem$1, [1, "calcite-stepper-item", {
+    "active": [1540],
+    "complete": [516],
+    "error": [4],
+    "disabled": [4],
+    "itemTitle": [1, "item-title"],
+    "itemSubtitle": [1, "item-subtitle"],
+    "layout": [1537],
+    "icon": [1028],
+    "numbered": [1028],
+    "scale": [1537]
+  }, [[0, "keydown", "keyDownHandler"], [16, "calciteStepperItemChange", "updateActiveItemOnChange"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-stepper-item", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-stepper-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteStepperItem$1);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteStepperItem = CalciteStepperItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteStepperItem, defineCustomElement };

package/dist/components/calcite-stepper.d.ts

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