@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.68

package/dist/components/calcite-fab.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 { attachShadow, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { f as focusElement, a as getElementDir } from './dom.js';
+import { d as defineCustomElement$4 } from './calcite-button2.js';
+import { d as defineCustomElement$3 } from './calcite-icon2.js';
+import { d as defineCustomElement$2 } from './calcite-loader2.js';
+
+const CSS = {
+  button: "button"
+};
+const ICONS = {
+  plus: "plus"
+};
+
+const calciteFabCss = "@-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;background-color:transparent}calcite-button{-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)}calcite-button:hover{-webkit-box-shadow:0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);box-shadow:0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)}calcite-button:active{-webkit-box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)}";
+
+let CalciteFab$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "neutral";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     * @default "plus"
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, el, loading, scale, textEnabled, icon, label, text } = this;
+    const title = !textEnabled ? label || text || null : null;
+    const dir = getElementDir(el);
+    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, dir: dir, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
+        this.buttonEl = buttonEl;
+      }, round: true, scale: scale, title: title, width: "auto" }, this.textEnabled ? this.text : null));
+  }
+  get el() { return this; }
+  static get style() { return calciteFabCss; }
+};
+CalciteFab$1 = /*@__PURE__*/ proxyCustomElement(CalciteFab$1, [1, "calcite-fab", {
+    "appearance": [513],
+    "color": [513],
+    "disabled": [516],
+    "icon": [1],
+    "label": [1],
+    "loading": [516],
+    "scale": [513],
+    "text": [1],
+    "textEnabled": [516, "text-enabled"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  const components = ["calcite-fab", "calcite-button", "calcite-icon", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-fab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteFab$1);
+      }
+      break;
+    case "calcite-button":
+      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 CalciteFab = CalciteFab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteFab, defineCustomElement };

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

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

package/dist/components/calcite-filter.js

@@ -0,0 +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.
+ */
+import { C as CalciteFilter$1, d as defineCustomElement$1 } from './calcite-filter2.js';
+
+const CalciteFilter = CalciteFilter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteFilter, defineCustomElement };

package/dist/components/calcite-filter2.js

@@ -0,0 +1,165 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { f as focusElement, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { d as defineCustomElement$5 } from './calcite-icon2.js';
+import { d as defineCustomElement$4 } from './calcite-input2.js';
+import { d as defineCustomElement$3 } from './calcite-loader2.js';
+import { d as defineCustomElement$2 } from './calcite-progress2.js';
+import { d as defineCustomElement$1 } from './calcite-scrim2.js';
+import { d as debounce } from './debounce.js';
+import { f as forIn } from './forIn.js';
+
+const CSS = {
+  container: "container",
+  searchIcon: "search-icon",
+  clearButton: "clear-button"
+};
+const TEXT = {
+  filterLabel: "Filter",
+  clear: "Clear filter"
+};
+const ICONS = {
+  search: "search",
+  close: "x"
+};
+
+const calciteFilterCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;width:100%}.container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem}label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden;position:relative;width:100%;margin-left:0.25rem;margin-right:0.25rem;margin-top:0;margin-bottom:0}input[type=text]{background-color:transparent;border-style:none;font-family:inherit;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size--2);line-height:1rem;margin-bottom:0.25rem;width:100%;padding-top:0.25rem;padding-bottom:0.25rem;padding-right:0.25rem;padding-left:1.5rem;-webkit-transition:padding 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, box-shadow 150ms ease-in-out;transition:padding 150ms ease-in-out, box-shadow 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out}input[type=text]::-ms-clear{display:none}calcite-input{width:100%}.search-icon{display:-ms-flexbox;display:flex;left:0;position:absolute;color:var(--calcite-ui-text-2);-webkit-transition:left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out;transition:left 150ms ease-in-out, right 150ms ease-in-out, opacity 150ms ease-in-out}.calcite--rtl .search-icon{right:0}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-left:0.25rem;padding-right:0.25rem}input[type=text]:focus~.search-icon{left:calc(1rem * -1);opacity:0}.calcite--rtl input[type=text]{padding-left:0.25rem;padding-right:1.5rem}.calcite--rtl input[type=text]:focus{padding-right:1.25rem}.calcite--rtl input[type=text]:focus~.search-icon{right:calc(1rem * -1)}.clear-button{color:var(--calcite-ui-text-2);background-color:transparent;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
+
+const filterDebounceInMs = 250;
+let CalciteFilter = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    this.empty = true;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.filter = debounce((value) => {
+      const regex = new RegExp(value, "i");
+      if (this.data.length === 0) {
+        console.warn(`No data was passed to calcite-filter.
+      The data property expects an array of objects`);
+        this.calciteFilterChange.emit([]);
+        return;
+      }
+      const find = (input, RE) => {
+        let found = false;
+        forIn(input, (val) => {
+          if (typeof val === "function") {
+            return;
+          }
+          if (Array.isArray(val) || (typeof val === "object" && val !== null)) {
+            if (find(val, RE)) {
+              found = true;
+            }
+          }
+          else if (RE.test(val)) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      const result = this.data.filter((item) => {
+        return find(item, regex);
+      });
+      this.calciteFilterChange.emit(result);
+    }, filterDebounceInMs);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.empty = target.value === "";
+      this.filter(target.value);
+    };
+    this.keyDownHandler = ({ key }) => {
+      if (key === "Escape") {
+        this.clear();
+      }
+    };
+    this.clear = () => {
+      this.textInput.value = "";
+      this.empty = true;
+      this.calciteFilterChange.emit(this.data);
+      this.setFocus();
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.textInput);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    const { disabled } = this;
+    return (h(Fragment, null, disabled ? h("calcite-scrim", null) : null, h("div", { class: CSS.container }, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        this.textInput = el;
+      }, type: "text", value: "" })), !this.empty ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear }, h("calcite-icon", { icon: ICONS.close }))) : null)));
+  }
+  get el() { return this; }
+  static get style() { return calciteFilterCss; }
+};
+CalciteFilter = /*@__PURE__*/ proxyCustomElement(CalciteFilter, [1, "calcite-filter", {
+    "data": [16],
+    "disabled": [516],
+    "intlClear": [1, "intl-clear"],
+    "intlLabel": [1, "intl-label"],
+    "placeholder": [1],
+    "empty": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteFilter);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteFilter as C, defineCustomElement as d };

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

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

package/dist/components/calcite-flow.js

@@ -0,0 +1,138 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createObserver } from './observers.js';
+
+const CSS = {
+  frame: "frame",
+  frameAdvancing: "frame--advancing",
+  frameRetreating: "frame--retreating"
+};
+
+const calciteFlowCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;width:100%;overflow:hidden;position:relative}:host .frame{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;width:100%;padding:0;margin:0;-ms-flex-direction:column;flex-direction:column;position:relative}:host ::slotted(calcite-panel){height:100%}:host ::slotted(.calcite-match-height:last-child){display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}:host .frame--advancing{-webkit-animation:calcite-frame-advance 150ms ease-in-out;animation:calcite-frame-advance 150ms ease-in-out}:host .frame--retreating{-webkit-animation:calcite-frame-retreat 150ms ease-in-out;animation:calcite-frame-retreat 150ms ease-in-out}@-webkit-keyframes calcite-frame-advance{0%{--bg-opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{--bg-opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-advance{0%{--bg-opacity:0.5;-webkit-transform:translate3d(50px, 0, 0);transform:translate3d(50px, 0, 0)}100%{--bg-opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes calcite-frame-retreat{0%{--bg-opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{--bg-opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--bg-opacity:0.5;-webkit-transform:translate3d(-50px, 0, 0);transform:translate3d(-50px, 0, 0)}100%{--bg-opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}";
+
+let CalciteFlow$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.panelCount = 0;
+    this.flowDirection = null;
+    this.panels = [];
+    this.getFlowDirection = (oldPanelCount, newPanelCount) => {
+      const allowRetreatingDirection = oldPanelCount > 1;
+      const allowAdvancingDirection = oldPanelCount && newPanelCount > 1;
+      if (!allowAdvancingDirection && !allowRetreatingDirection) {
+        return null;
+      }
+      return newPanelCount < oldPanelCount ? "retreating" : "advancing";
+    };
+    this.updateFlowProps = () => {
+      const { panels } = this;
+      const newPanels = Array.from(this.el.querySelectorAll("calcite-panel"));
+      const oldPanelCount = panels.length;
+      const newPanelCount = newPanels.length;
+      const activePanel = newPanels[newPanelCount - 1];
+      const previousPanel = newPanels[newPanelCount - 2];
+      if (newPanelCount && activePanel) {
+        newPanels.forEach((panelNode) => {
+          panelNode.showBackButton = newPanelCount > 1;
+          panelNode.hidden = panelNode !== activePanel;
+        });
+      }
+      if (previousPanel) {
+        previousPanel.menuOpen = false;
+      }
+      this.panels = newPanels;
+      if (oldPanelCount !== newPanelCount) {
+        const flowDirection = this.getFlowDirection(oldPanelCount, newPanelCount);
+        this.panelCount = newPanelCount;
+        this.flowDirection = flowDirection;
+      }
+    };
+    this.panelItemMutationObserver = createObserver("mutation", this.updateFlowProps);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Removes the currently active `calcite-panel`.
+   */
+  async back() {
+    const lastItem = this.el.querySelector("calcite-panel:last-child");
+    if (!lastItem) {
+      return;
+    }
+    const beforeBack = lastItem.beforeBack
+      ? lastItem.beforeBack
+      : () => Promise.resolve();
+    return beforeBack.call(lastItem).then(() => {
+      lastItem.remove();
+      return lastItem;
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.updateFlowProps();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  handleCalcitePanelBackClick() {
+    this.back();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { flowDirection, panelCount } = this;
+    const frameDirectionClasses = {
+      [CSS.frame]: true,
+      [CSS.frameAdvancing]: flowDirection === "advancing",
+      [CSS.frameRetreating]: flowDirection === "retreating"
+    };
+    return (h("div", { class: frameDirectionClasses, key: panelCount }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return calciteFlowCss; }
+};
+CalciteFlow$1 = /*@__PURE__*/ proxyCustomElement(CalciteFlow$1, [1, "calcite-flow", {
+    "panelCount": [32],
+    "flowDirection": [32],
+    "panels": [32],
+    "back": [64]
+  }, [[0, "calcitePanelBackClick", "handleCalcitePanelBackClick"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-flow"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-flow":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteFlow$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteFlow = CalciteFlow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteFlow, defineCustomElement };

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

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

package/dist/components/calcite-graph.js

@@ -0,0 +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.
+ */
+import { C as CalciteGraph$1, d as defineCustomElement$1 } from './calcite-graph2.js';
+
+const CalciteGraph = CalciteGraph$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteGraph, defineCustomElement };