@esri/calcite-components 1.0.0-beta.93 → 1.0.0-beta.94

package/dist/esm/calcite-handle.entry.js

@@ -1,90 +1,90 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.93
+ * v1.0.0-beta.94
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebacd58f.js';
-import { t as toAriaBoolean } from './dom-a762d6de.js';
-import './resources-3f24d3fc.js';
-import './guid-979aa261.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-53f14b87.js';
+import { t as toAriaBoolean } from './dom-8d6885a3.js';
+import './resources-54fe885f.js';
+import './guid-673b0460.js';
 
-const CSS = {
-  handle: "handle",
-  handleActivated: "handle--activated"
-};
-const ICONS = {
-  drag: "drag"
+const CSS = {
+  handle: "handle",
+  handleActivated: "handle--activated"
+};
+const ICONS = {
+  drag: "drag"
 };
 
 const handleCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex}.handle{display:-ms-flexbox;display:flex;cursor:move;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:stretch;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-ui-border-3);padding-block:0.75rem;padding-inline: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}";
 
-const Handle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * @internal
-     */
-    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;
-          event.preventDefault();
-          break;
-        case "ArrowUp":
-        case "ArrowDown":
-          if (!this.activated) {
-            return;
-          }
-          event.preventDefault();
-          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() {
-    var _a;
-    (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    return (
-    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-    h("span", { "aria-pressed": toAriaBoolean(this.activated), 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 getElement(this); }
-};
+const Handle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * @internal
+     */
+    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;
+          event.preventDefault();
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+          if (!this.activated) {
+            return;
+          }
+          event.preventDefault();
+          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() {
+    var _a;
+    (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (
+    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+    h("span", { "aria-pressed": toAriaBoolean(this.activated), 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 getElement(this); }
+};
 Handle.style = handleCss;
 
 export { Handle as calcite_handle };

package/dist/esm/calcite-icon.entry.js

@@ -1,171 +1,171 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.93
+ * v1.0.0-beta.94
  */
-import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-ebacd58f.js';
-import { a as getElementDir, t as toAriaBoolean } from './dom-a762d6de.js';
-import { c as createObserver } from './observers-78730da1.js';
-import './resources-3f24d3fc.js';
-import './guid-979aa261.js';
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-53f14b87.js';
+import { a as getElementDir, t as toAriaBoolean } from './dom-8d6885a3.js';
+import { c as createObserver } from './observers-0433c649.js';
+import './resources-54fe885f.js';
+import './guid-673b0460.js';
 
-const CSS = {
-  icon: "icon",
-  flipRtl: "flip-rtl"
+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/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.
- *
- * @param name
- * @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("");
+/**
+ * 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/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.
+ *
+ * @param name
+ * @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 iconCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){block-size:1rem;inline-size:1rem;min-inline-size:1rem;min-block-size:1rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem;min-inline-size:1.5rem;min-block-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem;min-inline-size:2rem;min-block-size:2rem}.flip-rtl{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg{display:block}";
 
-const Icon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    //--------------------------------------------------------------------------
-    //
-    //  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": toAriaBoolean(!semantic), "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 (!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 getElement(this); }
-  static get watchers() { return {
-    "icon": ["loadIconPathData"],
-    "scale": ["loadIconPathData"]
-  }; }
-};
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    //--------------------------------------------------------------------------
+    //
+    //  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": toAriaBoolean(!semantic), "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 (!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 getElement(this); }
+  static get watchers() { return {
+    "icon": ["loadIconPathData"],
+    "scale": ["loadIconPathData"]
+  }; }
+};
 Icon.style = iconCss;
 
 export { Icon as calcite_icon };