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

package/dist/components/calcite-graph2.js

@@ -0,0 +1,213 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { h, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+
+/**
+ * Calculate slope of the tangents
+ * uses Steffen interpolation as it's monotonic
+ * http://jrwalsh1.github.io/posts/interpolations/
+ */
+function slope(p0, p1, p2) {
+  const dx = p1[0] - p0[0];
+  const dx1 = p2[0] - p1[0];
+  const dy = p1[1] - p0[1];
+  const dy1 = p2[1] - p1[1];
+  const m = dy / (dx || (dx1 < 0 && 0));
+  const m1 = dy1 / (dx1 || (dx < 0 && 0));
+  const p = (m * dx1 + m1 * dx) / (dx + dx1);
+  return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
+}
+/**
+ * Calculate slope for just one tangent (single-sided)
+ */
+function slopeSingle(p0, p1, m) {
+  const dx = p1[0] - p0[0];
+  const dy = p1[1] - p0[1];
+  return dx ? ((3 * dy) / dx - m) / 2 : m;
+}
+/**
+ * Given two points and their tangent slopes,
+ * calculate the bezier handle coordinates and return draw command.
+ *
+ * Translates Hermite Spline to Beziér curve:
+ * stackoverflow.com/questions/42574940/
+ */
+function bezier(p0, p1, m0, m1, t) {
+  const [x0, y0] = p0;
+  const [x1, y1] = p1;
+  const dx = (x1 - x0) / 3;
+  const h1 = t([x0 + dx, y0 + dx * m0]).join(",");
+  const h2 = t([x1 - dx, y1 - dx * m1]).join(",");
+  const p = t([x1, y1]).join(",");
+  return `C ${h1} ${h2} ${p}`;
+}
+/**
+ * Generate a function which will translate a point
+ * from the data coordinate space to svg viewbox oriented pixels
+ */
+function translate({ width, height, min, max }) {
+  const rangeX = max[0] - min[0];
+  const rangeY = max[1] - min[1];
+  return (point) => {
+    const x = ((point[0] - min[0]) / rangeX) * width;
+    const y = height - (point[1] / rangeY) * height;
+    return [x, y];
+  };
+}
+/**
+ * Get the min and max values from the dataset
+ */
+function range(data) {
+  const [startX, startY] = data[0];
+  const min = [startX, startY];
+  const max = [startX, startY];
+  return data.reduce(({ min, max }, [x, y]) => ({
+    min: [Math.min(min[0], x), Math.min(min[1], y)],
+    max: [Math.max(max[0], x), Math.max(max[1], y)]
+  }), { min, max });
+}
+/**
+ * Generate drawing commands for an area graph
+ * returns a string can can be passed directly to a path element's `d` attribute
+ */
+function area({ data, min, max, t }) {
+  if (data.length === 0) {
+    return "";
+  }
+  // important points for beginning and ending the path
+  const [startX, startY] = t(data[0]);
+  const [minX, minY] = t(min);
+  const [maxX] = t(max);
+  // keep track of previous slope/points
+  let m;
+  let p0;
+  let p1;
+  // iterate over data points, calculating command for each
+  const commands = data.reduce((acc, point, i) => {
+    p0 = data[i - 2];
+    p1 = data[i - 1];
+    if (i > 1) {
+      const m1 = slope(p0, p1, point);
+      const m0 = m === undefined ? slopeSingle(p0, p1, m1) : m;
+      const command = bezier(p0, p1, m0, m1, t);
+      m = m1;
+      return `${acc} ${command}`;
+    }
+    return acc;
+  }, `M ${minX},${minY} L ${minX},${startY} L ${startX},${startY}`);
+  // close the path
+  const last = data[data.length - 1];
+  const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);
+  return `${commands} ${end} L ${maxX},${minY} Z`;
+}
+
+const calciteGraphCss = "@-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:block}.svg{fill:currentColor;stroke:transparent;margin:0;padding:0;display:block}:host([data-style=slider-histogram]) svg{width:100%}:host([data-style=slider-histogram]) svg .graph-path--highlight{fill:var(--calcite-ui-brand);opacity:0.5}";
+
+let CalciteGraph = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Array of tuples describing a single data point ([x, y])
+     * These data points should be sorted by x-axis value
+     */
+    this.data = [];
+    /** Width of graph in pixels*/
+    this.width = 300;
+    /** Width of graph in pixels*/
+    this.height = 100;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.graphId = `calcite-graph-${guid()}`;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
+    const id = this.graphId;
+    // if we have no data, return empty svg
+    if (!data || data.length === 0) {
+      return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
+    }
+    const { min: rangeMin, max: rangeMax } = range(data);
+    let currentMin = rangeMin;
+    let currentMax = rangeMax;
+    if (min < rangeMin[0]) {
+      currentMin = [min, 0];
+    }
+    if (max > rangeMax[0]) {
+      currentMax = [max, rangeMax[1]];
+    }
+    const t = translate({ min: currentMin, max: currentMax, width, height });
+    const [hMinX] = t([highlightMin, currentMax[1]]);
+    const [hMaxX] = t([highlightMax, currentMax[1]]);
+    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
+    const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
+    return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
+      h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+            M 0,0
+            L ${hMinX - 1},0
+            L ${hMinX - 1},${height}
+            L 0,${height}
+            Z
+          `, fill: "white" })),
+      h("mask", { height: "100%", id: `${id}2`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+            M ${hMinX + 1},0
+            L ${hMaxX - 1},0
+            L ${hMaxX - 1},${height}
+            L ${hMinX + 1}, ${height}
+            Z
+          `, fill: "white" })),
+      h("mask", { height: "100%", id: `${id}3`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+                M ${hMaxX + 1},0
+                L ${width},0
+                L ${width},${height}
+                L ${hMaxX + 1}, ${height}
+                Z
+              `, fill: "white" })),
+      h("path", { class: "graph-path", d: areaPath, fill: fill, mask: `url(#${id}1)` }),
+      h("path", { class: "graph-path--highlight", d: areaPath, fill: fill, mask: `url(#${id}2)` }),
+      h("path", { class: "graph-path", d: areaPath, fill: fill, mask: `url(#${id}3)` })
+    ]) : (h("path", { class: "graph-path", d: areaPath, fill: fill }))));
+  }
+  get el() { return this; }
+  static get style() { return calciteGraphCss; }
+};
+CalciteGraph = /*@__PURE__*/ proxyCustomElement(CalciteGraph, [1, "calcite-graph", {
+    "data": [16],
+    "colorStops": [16],
+    "width": [2],
+    "height": [2],
+    "highlightMin": [2, "highlight-min"],
+    "highlightMax": [2, "highlight-max"],
+    "min": [2],
+    "max": [2]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-graph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-graph":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteGraph);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteGraph as C, defineCustomElement as d };

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

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

package/dist/components/calcite-handle.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 CalciteHandle$1, d as defineCustomElement$1 } from './calcite-handle2.js';
+
+const CalciteHandle = CalciteHandle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteHandle, defineCustomElement };

package/dist/components/calcite-handle2.js

@@ -0,0 +1,107 @@
+/*!
+ * 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 { d as defineCustomElement$1 } from './calcite-icon2.js';
+
+const CSS = {
+  handle: "handle",
+  handleActivated: "handle--activated"
+};
+const ICONS = {
+  drag: "drag"
+};
+
+const calciteHandleCss = "@-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}.handle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;background-color:transparent;border-style:none;cursor:move;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;color:var(--calcite-ui-border-3);padding:0.75rem 0.25rem;line-height:0}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.handle:focus{color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.handle calcite-icon{color:inherit}";
+
+let CalciteHandle = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * @internal - stores the activated state of the drag handle.
+     */
+    this.activated = false;
+    /**
+     * Value for the button title attribute
+     */
+    this.textTitle = "handle";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+          this.activated = !this.activated;
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          const direction = event.key.toLowerCase().replace("arrow", "");
+          this.calciteHandleNudge.emit({ handle: this.el, direction });
+          break;
+      }
+    };
+    this.handleBlur = () => {
+      this.activated = false;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    this.handleButton.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { "aria-pressed": this.activated.toString(), class: { [CSS.handle]: true, [CSS.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        this.handleButton = el;
+      }, role: "button", tabindex: "0", title: this.textTitle }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+  }
+  get el() { return this; }
+  static get style() { return calciteHandleCss; }
+};
+CalciteHandle = /*@__PURE__*/ proxyCustomElement(CalciteHandle, [1, "calcite-handle", {
+    "activated": [1540],
+    "textTitle": [513, "text-title"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-handle", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-handle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteHandle);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteHandle as C, defineCustomElement as d };

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

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

package/dist/components/calcite-icon.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 CalciteIcon$1, d as defineCustomElement$1 } from './calcite-icon2.js';
+
+const CalciteIcon = CalciteIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteIcon, defineCustomElement };

package/dist/components/calcite-icon2.js

@@ -0,0 +1,185 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { getAssetPath, h, Host, Build, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as getElementDir } from './dom.js';
+import { c as createObserver } from './observers.js';
+
+const CSS = {
+  icon: "icon",
+  flipRtl: "flip-rtl"
+};
+
+/**
+ * Icon data cache.
+ * Exported for testing purposes.
+ * @private
+ */
+const iconCache = {};
+/**
+ * Icon request cache.
+ * Exported for testing purposes.
+ * @private
+ */
+const requestCache = {};
+const scaleToPx = {
+  s: 16,
+  m: 24,
+  l: 32
+};
+async function fetchIcon({ icon, scale }) {
+  const size = scaleToPx[scale];
+  const name = normalizeIconName(icon);
+  const filled = name.charAt(name.length - 1) === "F";
+  const iconName = filled ? name.substring(0, name.length - 1) : name;
+  const id = `${iconName}${size}${filled ? "F" : ""}`;
+  if (iconCache[id]) {
+    return iconCache[id];
+  }
+  if (!requestCache[id]) {
+    requestCache[id] = fetch(getAssetPath(`./assets/calcite-icon/${id}.json`))
+      .then((resp) => resp.json())
+      .catch(() => {
+      console.error(`"${id}" is not a valid calcite-ui-icon name`);
+      return "";
+    });
+  }
+  const path = await requestCache[id];
+  iconCache[id] = path;
+  return path;
+}
+/**
+ * Normalize the icon name to match the path data module exports.
+ * Exported for testing purposes.
+ * @private
+ */
+function normalizeIconName(name) {
+  const numberLeadingName = !isNaN(Number(name.charAt(0)));
+  const parts = name.split("-");
+  if (parts.length === 1) {
+    return numberLeadingName ? `i${name}` : name;
+  }
+  return parts
+    .map((part, index) => {
+    if (index === 0) {
+      return numberLeadingName ? `i${part.toUpperCase()}` : part;
+    }
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  })
+    .join("");
+}
+
+const calciteIconCss = "@-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-inline-flexbox;display:inline-flex}:host([scale=s]){width:1rem;height:1rem;min-width:1rem;min-height:1rem}:host([scale=m]){width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem}:host([scale=l]){width:2rem;height:2rem;min-width:2rem;min-height:2rem}.flip-rtl{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg{display:block}";
+
+let CalciteIcon = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * 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/.
+     */
+    this.icon = null;
+    /**
+     * When true, the icon will be flipped when the element direction is 'rtl'.
+     */
+    this.flipRtl = false;
+    /**
+     * Icon scale.
+     */
+    this.scale = "m";
+    this.visible = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.waitUntilVisible(() => {
+      this.visible = true;
+      this.loadIconPathData();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = null;
+  }
+  async componentWillLoad() {
+    this.loadIconPathData();
+  }
+  render() {
+    const { el, flipRtl, pathData, scale, textLabel } = this;
+    const dir = getElementDir(el);
+    const size = scaleToPx[scale];
+    const semantic = !!textLabel;
+    const paths = [].concat(pathData || "");
+    return (h(Host, { "aria-hidden": (!semantic).toString(), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, h("svg", { class: {
+        [CSS.flipRtl]: dir === "rtl" && flipRtl,
+        svg: true
+      }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (h("path", { d: path })) : (h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  async loadIconPathData() {
+    const { icon, scale, visible } = this;
+    if (!Build.isBrowser || !icon || !visible) {
+      return;
+    }
+    this.pathData = await fetchIcon({ icon, scale });
+  }
+  waitUntilVisible(callback) {
+    this.intersectionObserver = createObserver("intersection", (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.intersectionObserver.disconnect();
+          this.intersectionObserver = null;
+          callback();
+        }
+      });
+    }, { rootMargin: "50px" });
+    if (!this.intersectionObserver) {
+      callback();
+      return;
+    }
+    this.intersectionObserver.observe(this.el);
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "icon": ["loadIconPathData"],
+    "scale": ["loadIconPathData"]
+  }; }
+  static get style() { return calciteIconCss; }
+};
+CalciteIcon = /*@__PURE__*/ proxyCustomElement(CalciteIcon, [1, "calcite-icon", {
+    "icon": [513],
+    "flipRtl": [516, "flip-rtl"],
+    "scale": [513],
+    "textLabel": [1, "text-label"],
+    "pathData": [32],
+    "visible": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteIcon);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteIcon as C, defineCustomElement as d };

package/dist/components/calcite-inline-editable.d.ts

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