@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/cjs/utils-55d67711.js

@@ -0,0 +1,123 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+'use strict';
+
+function rgbToHex(color) {
+  const { r, g, b } = color;
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b
+    .toString(16)
+    .padStart(2, "0")}`.toLowerCase();
+}
+const hexChar = /^[0-9A-F]$/i;
+const shortHandHex = /^#[0-9A-F]{3}$/i;
+const longhandHex = /^#[0-9A-F]{6}$/i;
+function isValidHex(hex) {
+  return isShorthandHex(hex) || isLonghandHex(hex);
+}
+function isShorthandHex(hex) {
+  return hex && hex.length === 4 && shortHandHex.test(hex);
+}
+function isLonghandHex(hex) {
+  return hex && hex.length === 7 && longhandHex.test(hex);
+}
+function normalizeHex(hex) {
+  hex = hex.toLowerCase();
+  if (!hex.startsWith("#")) {
+    hex = `#${hex}`;
+  }
+  if (isShorthandHex(hex)) {
+    return rgbToHex(hexToRGB(hex));
+  }
+  return hex;
+}
+function hexToRGB(hex) {
+  if (!isValidHex(hex)) {
+    return null;
+  }
+  hex = hex.replace("#", "");
+  if (hex.length === 3) {
+    const [first, second, third] = hex.split("");
+    const r = parseInt(`${first}${first}`, 16);
+    const g = parseInt(`${second}${second}`, 16);
+    const b = parseInt(`${third}${third}`, 16);
+    return { r, g, b };
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return { r, g, b };
+}
+// these utils allow users to pass enum values as strings without having to access the enum
+// based on the approach suggested by https://github.com/microsoft/TypeScript/issues/17690#issuecomment-321365759,
+const enumify = (x) => x;
+const CSSColorMode = enumify({
+  HEX: "hex",
+  HEXA: "hexa",
+  RGB_CSS: "rgb-css",
+  RGBA_CSS: "rgba-css",
+  HSL_CSS: "hsl-css",
+  HSLA_CSS: "hsla-css"
+});
+const ObjectColorMode = enumify({
+  RGB: "rgb",
+  RGBA: "rgba",
+  HSL: "hsl",
+  HSLA: "hsla",
+  HSV: "hsv",
+  HSVA: "hsva"
+});
+function parseMode(colorValue) {
+  if (typeof colorValue === "string") {
+    if (colorValue.startsWith("#")) {
+      const { length } = colorValue;
+      if (length === 4 || length === 7) {
+        return CSSColorMode.HEX;
+      }
+      if (length === 5 || length === 9) {
+        return CSSColorMode.HEXA;
+      }
+    }
+    if (colorValue.startsWith("rgba(")) {
+      return CSSColorMode.RGBA_CSS;
+    }
+    if (colorValue.startsWith("rgb(")) {
+      return CSSColorMode.RGB_CSS;
+    }
+    if (colorValue.startsWith("hsl(")) {
+      return CSSColorMode.HSL_CSS;
+    }
+    if (colorValue.startsWith("hsla(")) {
+      return CSSColorMode.HSLA_CSS;
+    }
+  }
+  if (typeof colorValue === "object") {
+    if (hasChannels(colorValue, "r", "g", "b")) {
+      return hasChannels(colorValue, "a") ? ObjectColorMode.RGBA : ObjectColorMode.RGB;
+    }
+    if (hasChannels(colorValue, "h", "s", "l")) {
+      return hasChannels(colorValue, "a") ? ObjectColorMode.HSLA : ObjectColorMode.HSL;
+    }
+    if (hasChannels(colorValue, "h", "s", "v")) {
+      return hasChannels(colorValue, "a") ? ObjectColorMode.HSVA : ObjectColorMode.HSV;
+    }
+  }
+  return null;
+}
+function hasChannels(colorObject, ...channels) {
+  return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
+}
+function colorEqual(value1, value2) {
+  return (value1 === null || value1 === void 0 ? void 0 : value1.rgbNumber()) === (value2 === null || value2 === void 0 ? void 0 : value2.rgbNumber());
+}
+
+exports.CSSColorMode = CSSColorMode;
+exports.colorEqual = colorEqual;
+exports.hexChar = hexChar;
+exports.hexToRGB = hexToRGB;
+exports.isLonghandHex = isLonghandHex;
+exports.isValidHex = isValidHex;
+exports.normalizeHex = normalizeHex;
+exports.parseMode = parseMode;
+exports.rgbToHex = rgbToHex;

package/dist/collection/collection-manifest.json

@@ -94,8 +94,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.8.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.10.0",
+    "typescriptVersion": "4.3.5"
   },
   "collections": [],
   "bundles": [

package/dist/collection/components/calcite-accordion/calcite-accordion.js

@@ -1,5 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Listen, Prop } from "@stencil/core";
 import { getKey } from "../../utils/key";
+/**
+ * @slot - A slot for adding `calcite-accordion-item`s.
+ */
 export class CalciteAccordion {
   constructor() {
     //--------------------------------------------------------------------------
@@ -251,8 +258,8 @@ export class CalciteAccordion {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-accordion/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-accordion-item/calcite-accordion-item.js

@@ -1,7 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalciteAccordionItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -203,8 +210,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -221,8 +228,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -239,8 +246,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -257,8 +264,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-action/calcite-action.css

@@ -184,7 +184,7 @@
 }
 
 :host([scale=s]) .button--text-visible .icon-container {
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 :host([scale=m]) .button {
@@ -195,7 +195,7 @@
 }
 
 :host([scale=m]) .button--text-visible .icon-container {
-  margin-right: 0.75rem;
+  margin-inline-end: 0.75rem;
 }
 
 :host([scale=l]) .button {
@@ -206,18 +206,18 @@
 }
 
 :host([scale=l]) .button--text-visible .icon-container {
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 :host([alignment=center]) .button {
   justify-content: center;
-  width: 100%;
 }
 
 :host([alignment=end]) .button {
   justify-content: flex-end;
 }
 
+:host([alignment=center]) .button .text-container--visible,
 :host([alignment=end]) .button .text-container--visible {
   flex: 0 1 auto;
 }
@@ -241,35 +241,6 @@
   width: 100%;
 }
 
-.button--text-visible .icon-container {
-  margin: 0;
-}
-
-.button--text-visible .text-container--visible {
-  margin: 0;
-  margin-right: 0.5rem;
-}
-
-.button--text-visible.calcite--rtl .text-container--visible {
-  margin: 0;
-  margin-left: 0.5rem;
-}
-
-:host([scale=s]) .button--text-visible.calcite--rtl .icon-container {
-  margin: 0;
-  margin-left: 0.5rem;
-}
-
-:host([scale=m]) .button--text-visible.calcite--rtl .icon-container {
-  margin: 0;
-  margin-left: 0.75rem;
-}
-
-:host([scale=l]) .button--text-visible.calcite--rtl .icon-container {
-  margin: 0;
-  margin-left: 1rem;
-}
-
 :host([active]) .button,
 :host([active]) .button:hover,
 :host([active]) .button:focus,
@@ -341,12 +312,6 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-:host([indicator]) .button--text-visible,
-:host([indicator][scale=s]) .button--text-visible,
-:host([indicator][scale=l]) .button--text-visible {
-  padding-right: 1rem;
-}
-
 :host([indicator]) .button::after {
   content: "";
   position: absolute;
@@ -357,28 +322,16 @@
   width: 0.5rem;
   z-index: 10;
   border-color: var(--calcite-ui-foreground-1);
-  bottom: 0.5rem;
-  right: 0.5rem;
-}
-
-:host([indicator][scale=s]) .button::after {
-  bottom: 0.25rem;
-  right: 0.25rem;
+  inset-block-end: 0.75rem;
+  inset-inline-end: 0.75rem;
 }
 
-:host([indicator][scale=l]) .button::after {
-  bottom: 0.5rem;
-  right: 0.5rem;
+:host([indicator]) .button--text-visible::after {
+  inset-block-end: auto;
 }
 
-:host([indicator]) .calcite--rtl::after {
-  right: auto;
-  left: 0.25rem;
-}
-
-:host([indicator]) .button--text-visible.calcite--rtl {
-  padding-right: 0.75rem;
-  padding-left: 1rem;
+:host([indicator]) .button--text-visible .text-container--visible {
+  margin-inline-end: 1rem;
 }
 
 :host([indicator]) .button:hover::after,
@@ -386,20 +339,16 @@
   border-color: var(--calcite-ui-foreground-1);
 }
 
-:host([indicator][active]) .button::after {
-  border-color: var(--calcite-ui-foreground-3);
+:host([indicator][scale=s]) .button::after {
+  inset-block-end: 0.25rem;
+  inset-inline-end: 0.25rem;
 }
 
-:host([indicator]) .button--text-visible::after,
-:host([indicator][scale=s]) .button--text-visible::after,
-:host([indicator][scale=l]) .button--text-visible::after {
-  bottom: auto;
-  right: 0.5rem;
+:host([indicator][scale=s]) .button--text-visible::after {
+  inset-block-end: auto;
+  inset-inline-end: 0.5rem;
 }
 
-:host([indicator]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale=s]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale=l]) .button--text-visible.calcite--rtl::after {
-  right: auto;
-  left: 0.5rem;
+:host([indicator][active]) .button::after {
+  border-color: var(--calcite-ui-foreground-3);
 }

package/dist/collection/components/calcite-action/calcite-action.js

@@ -1,7 +1,9 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { getElementDir } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding a `calcite-icon`.
@@ -13,12 +15,12 @@ export class CalciteAction {
     //  Properties
     //
     // --------------------------------------------------------------------------
-    /** Specify the appearance style of the action, defaults to solid. */
-    this.appearance = "solid";
     /**
      * Indicates whether the action is highlighted.
      */
     this.active = false;
+    /** Specify the appearance style of the action, defaults to solid. */
+    this.appearance = "solid";
     /**
      * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
      */
@@ -112,14 +114,12 @@ export class CalciteAction {
       slotContainerNode)) : null;
   }
   render() {
-    const { compact, disabled, loading, el, textEnabled, label, text } = this;
+    const { compact, disabled, loading, textEnabled, label, text } = this;
     const ariaLabel = label || text;
-    const rtl = getElementDir(el) === "rtl";
     const buttonClasses = {
       [CSS.button]: true,
       [CSS.buttonTextVisible]: textEnabled,
-      [CSS.buttonCompact]: compact,
-      [CSS_UTILITY.rtl]: rtl
+      [CSS.buttonCompact]: compact
     };
     return (h(Host, { onClick: this.calciteActionClickHandler },
       h("button", { "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) },
@@ -135,29 +135,6 @@ export class CalciteAction {
     "$": ["calcite-action.css"]
   }; }
   static get properties() { return {
-    "appearance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Appearance",
-        "resolved": "\"clear\" | \"outline\" | \"solid\"",
-        "references": {
-          "Appearance": {
-            "location": "import",
-            "path": "../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specify the appearance style of the action, defaults to solid."
-      },
-      "attribute": "appearance",
-      "reflect": true,
-      "defaultValue": "\"solid\""
-    },
     "active": {
       "type": "boolean",
       "mutable": false,
@@ -193,11 +170,37 @@ export class CalciteAction {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Indicates the alignment when text-enabled is false."
+        "text": "Optionally specify the horizontal alignment of button elements with text content."
       },
       "attribute": "alignment",
       "reflect": true
     },
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Extract<\"solid\" | \"clear\", Appearance>",
+        "resolved": "\"clear\" | \"solid\"",
+        "references": {
+          "Extract": {
+            "location": "global"
+          },
+          "Appearance": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the appearance style of the action, defaults to solid."
+      },
+      "attribute": "appearance",
+      "reflect": true,
+      "defaultValue": "\"solid\""
+    },
     "compact": {
       "type": "boolean",
       "mutable": false,
@@ -281,8 +284,8 @@ export class CalciteAction {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -392,8 +395,8 @@ export class CalciteAction {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use onClick instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use onClick instead."
           }],
         "text": "Emitted when the action has been clicked."
       },

package/dist/collection/components/calcite-action/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   button: "button",
   buttonTextVisible: "button--text-visible",

package/dist/collection/components/calcite-action-bar/calcite-action-bar.js

@@ -1,9 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, focusElement } from "../../utils/dom";
-import { getOverflowCount, overflowActions, queryActions } from "./utils";
+import { getOverflowCount, overflowActions, queryActions, overflowActionsDebounceInMs } from "./utils";
 import { createObserver } from "../../utils/observers";
+import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
@@ -31,7 +36,7 @@ export class CalciteActionBar {
     this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ parent: el, expanded });
-      this.resizeFromHost();
+      this.conditionallyOverflowActions();
     });
     this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
     // --------------------------------------------------------------------------
@@ -49,9 +54,6 @@ export class CalciteActionBar {
         });
       }
     };
-    this.resizeFromHost = () => {
-      this.resize(this.el.clientHeight);
-    };
     this.resizeHandlerEntries = (entries) => {
       entries.forEach(this.resizeHandler);
     };
@@ -59,10 +61,10 @@ export class CalciteActionBar {
       const { height } = entry.contentRect;
       this.resize(height);
     };
-    this.resize = (height) => {
+    this.resize = debounce((height) => {
       var _a;
-      const { el, expanded, expandDisabled, lastActionCount, lastGroupCount, lastResizeHeight, overflowActionsDisabled } = this;
-      if (!height || overflowActionsDisabled) {
+      const { el, expanded, expandDisabled } = this;
+      if (!height) {
         return;
       }
       const actions = queryActions(el);
@@ -71,14 +73,6 @@ export class CalciteActionBar {
       const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
-      if (lastResizeHeight === height &&
-        lastActionCount === actionCount &&
-        lastGroupCount === groupCount) {
-        return;
-      }
-      this.lastActionCount = actionCount;
-      this.lastGroupCount = groupCount;
-      this.lastResizeHeight = height;
       const overflowCount = getOverflowCount({
         actionCount,
         actionHeight: (_a = actions[0]) === null || _a === void 0 ? void 0 : _a.clientHeight,
@@ -90,6 +84,11 @@ export class CalciteActionBar {
         expanded,
         overflowCount
       });
+    }, overflowActionsDebounceInMs);
+    this.conditionallyOverflowActions = () => {
+      if (!this.overflowActionsDisabled) {
+        this.overflowActions();
+      }
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
@@ -102,7 +101,7 @@ export class CalciteActionBar {
     if (!expandDisabled) {
       toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    this.resizeFromHost();
+    this.conditionallyOverflowActions();
   }
   expandedHandler(expanded) {
     if (!this.expandDisabled) {
@@ -121,7 +120,7 @@ export class CalciteActionBar {
   //
   // --------------------------------------------------------------------------
   componentDidLoad() {
-    this.resizeFromHost();
+    this.conditionallyOverflowActions();
   }
   connectedCallback() {
     var _a, _b;
@@ -133,7 +132,7 @@ export class CalciteActionBar {
     if (!this.overflowActionsDisabled) {
       (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
     }
-    this.resizeFromHost();
+    this.conditionallyOverflowActions();
   }
   disconnectedCallback() {
     var _a, _b;
@@ -145,6 +144,13 @@ export class CalciteActionBar {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /**
+   * Overflows actions that won't fit into menus.
+   * @internal
+   */
+  async overflowActions() {
+    this.resize(this.el.clientHeight);
+  }
   /** Sets focus on the component. */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
@@ -333,6 +339,25 @@ export class CalciteActionBar {
       }
     }]; }
   static get methods() { return {
+    "overflowActions": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Overflows actions that won't fit into menus.",
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }]
+      }
+    },
     "setFocus": {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",

package/dist/collection/components/calcite-action-bar/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"
 };

package/dist/collection/components/calcite-action-bar/utils.js

@@ -1,6 +1,11 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
+export const overflowActionsDebounceInMs = 150;
 const groupBufferHeight = 2;
 const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
   return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);

package/dist/collection/components/calcite-action-group/calcite-action-group.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, h, Prop, Watch, Element } from "@stencil/core";
 import { SLOTS, TEXT, ICONS } from "./resources";
 import { Fragment } from "@stencil/core/internal";