@esri/calcite-components 1.4.0-next.1 → 1.4.0-next.11

package/dist/esm/utils-c0bef67d.js

@@ -0,0 +1,195 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.0-next.11
+ */
+const hexChar = /^[0-9A-F]$/i;
+const shorthandHex = /^#[0-9A-F]{3}$/i;
+const longhandHex = /^#[0-9A-F]{6}$/i;
+const shorthandHexWithAlpha = /^#[0-9A-F]{4}$/i;
+const longhandHexWithAlpha = /^#[0-9A-F]{8}$/i;
+const alphaToOpacity = (alpha) => Number((alpha * 100).toFixed());
+const opacityToAlpha = (opacity) => Number((opacity / 100).toFixed(2));
+function isValidHex(hex, hasAlpha = false) {
+  return isShorthandHex(hex, hasAlpha) || isLonghandHex(hex, hasAlpha);
+}
+function evaluateHex(hex, length, pattern) {
+  if (!hex) {
+    return false;
+  }
+  return hex.length === length && pattern.test(hex);
+}
+function isShorthandHex(hex, hasAlpha = false) {
+  const hexLength = hasAlpha ? 5 : 4;
+  const hexPattern = hasAlpha ? shorthandHexWithAlpha : shorthandHex;
+  return evaluateHex(hex, hexLength, hexPattern);
+}
+function isLonghandHex(hex, hasAlpha = false) {
+  const hexLength = hasAlpha ? 9 : 7;
+  const hexPattern = hasAlpha ? longhandHexWithAlpha : longhandHex;
+  return evaluateHex(hex, hexLength, hexPattern);
+}
+function normalizeHex(hex, hasAlpha = false, convertFromHexToHexa = false) {
+  hex = hex.toLowerCase();
+  if (!hex.startsWith("#")) {
+    hex = `#${hex}`;
+  }
+  if (isShorthandHex(hex, hasAlpha)) {
+    return rgbToHex(hexToRGB(hex, hasAlpha));
+  }
+  if (hasAlpha && convertFromHexToHexa && isValidHex(hex, false /* we only care about RGB hex for conversion */)) {
+    const isShorthand = isShorthandHex(hex, false);
+    return rgbToHex(hexToRGB(`${hex}${isShorthand ? "f" : "ff"}`, true));
+  }
+  return hex;
+}
+function hexify(color, hasAlpha = false) {
+  return hasAlpha ? color.hexa() : color.hex();
+}
+function rgbToHex(color) {
+  const { r, g, b } = color;
+  const rChars = numToHex(r);
+  const gChars = numToHex(g);
+  const bChars = numToHex(b);
+  const alphaChars = "a" in color ? numToHex(color.a * 255) : "";
+  return `#${rChars}${gChars}${bChars}${alphaChars}`.toLowerCase();
+}
+function numToHex(num) {
+  return num.toString(16).padStart(2, "0");
+}
+function normalizeAlpha(colorObject) {
+  const normalized = { ...colorObject, a: colorObject.alpha ?? 1 /* Color() will omit alpha if 1 */ };
+  delete normalized.alpha;
+  return normalized;
+}
+function normalizeColor(alphaColorObject) {
+  const normalized = { ...alphaColorObject, alpha: alphaColorObject.a ?? 1 };
+  delete normalized.a;
+  return normalized;
+}
+function hexToRGB(hex, hasAlpha = false) {
+  if (!isValidHex(hex, hasAlpha)) {
+    return null;
+  }
+  hex = hex.replace("#", "");
+  let r, g, b, a;
+  const isShorthand = hex.length === 3 || hex.length === 4;
+  if (isShorthand) {
+    const [first, second, third, fourth] = hex.split("");
+    r = parseInt(`${first}${first}`, 16);
+    g = parseInt(`${second}${second}`, 16);
+    b = parseInt(`${third}${third}`, 16);
+    a = parseInt(`${fourth}${fourth}`, 16) / 255;
+  }
+  else {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16) / 255;
+  }
+  return isNaN(a) ? { r, g, b } : { r, g, b, a };
+}
+// 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?.rgb().array().toString() === value2?.rgb().array().toString();
+}
+function alphaCompatible(mode) {
+  return (mode === CSSColorMode.HEXA ||
+    mode === CSSColorMode.RGBA_CSS ||
+    mode === CSSColorMode.HSLA_CSS ||
+    mode === ObjectColorMode.RGBA ||
+    mode === ObjectColorMode.HSLA ||
+    mode === ObjectColorMode.HSVA);
+}
+function toAlphaMode(mode) {
+  const alphaMode = mode === CSSColorMode.HEX
+    ? CSSColorMode.HEXA
+    : mode === CSSColorMode.RGB_CSS
+      ? CSSColorMode.RGBA_CSS
+      : mode === CSSColorMode.HSL_CSS
+        ? CSSColorMode.HSLA_CSS
+        : mode === ObjectColorMode.RGB
+          ? ObjectColorMode.RGBA
+          : mode === ObjectColorMode.HSL
+            ? ObjectColorMode.HSLA
+            : mode === ObjectColorMode.HSV
+              ? ObjectColorMode.HSVA
+              : mode;
+  return alphaMode;
+}
+function toNonAlphaMode(mode) {
+  const nonAlphaMode = mode === CSSColorMode.HEXA
+    ? CSSColorMode.HEX
+    : mode === CSSColorMode.RGBA_CSS
+      ? CSSColorMode.RGB_CSS
+      : mode === CSSColorMode.HSLA_CSS
+        ? CSSColorMode.HSL_CSS
+        : mode === ObjectColorMode.RGBA
+          ? ObjectColorMode.RGB
+          : mode === ObjectColorMode.HSLA
+            ? ObjectColorMode.HSL
+            : mode === ObjectColorMode.HSVA
+              ? ObjectColorMode.HSV
+              : mode;
+  return nonAlphaMode;
+}
+
+export { CSSColorMode as C, hexify as a, alphaToOpacity as b, alphaCompatible as c, colorEqual as d, normalizeAlpha as e, toAlphaMode as f, normalizeColor as g, hexToRGB as h, isValidHex as i, isLonghandHex as j, hexChar as k, normalizeHex as n, opacityToAlpha as o, parseMode as p, rgbToHex as r, toNonAlphaMode as t };

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-04-28T22:19:19",
+  "timestamp": "2023-05-06T16:58:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -2182,7 +2182,23 @@
           "mutable": false,
           "attr": "full-name",
           "reflectToAttr": true,
-          "docs": "Specifies the full name of the user.",
+          "docs": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.",
           "docsTags": [],
           "values": [
             {
@@ -4146,7 +4162,41 @@
           "mutable": false,
           "attr": "allow-empty",
           "reflectToAttr": true,
-          "docs": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.",
+          "docs": "When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "alphaChannel",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "alpha-channel",
+          "reflectToAttr": false,
+          "docs": "When true, the component will allow updates to the color's alpha value.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "channelsDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "channels-disabled",
+          "reflectToAttr": false,
+          "docs": "When true, hides the RGB/HSV channel inputs",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4187,7 +4237,7 @@
               "text": "\"auto\""
             }
           ],
-          "default": "defaultFormat",
+          "default": "\"auto\"",
           "values": [
             {
               "value": "auto",
@@ -4245,6 +4295,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "hexDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "hex-disabled",
+          "reflectToAttr": false,
+          "docs": "When true, hides the hex input",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "hideChannels",
           "type": "boolean",
@@ -4252,8 +4319,14 @@
           "attr": "hide-channels",
           "reflectToAttr": true,
           "docs": "When `true`, hides the RGB/HSV channel inputs.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `channelsDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `channelsDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4268,9 +4341,15 @@
           "mutable": false,
           "attr": "hide-hex",
           "reflectToAttr": true,
-          "docs": "When `true`, hides the Hex input.",
-          "docsTags": [],
+          "docs": "When `true`, hides the hex input.",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `hexDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `hexDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4286,8 +4365,14 @@
           "attr": "hide-saved",
           "reflectToAttr": true,
           "docs": "When `true`, hides the saved colors section.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `savedDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `savedDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4412,6 +4497,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "savedDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "saved-disabled",
+          "reflectToAttr": true,
+          "docs": "When true, hides the saved colors section",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -4475,7 +4577,7 @@
               "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
             }
           ],
-          "default": "defaultValue",
+          "default": "normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel)\n  )",
           "values": [
             {
               "type": "HSL"
@@ -4556,22 +4658,22 @@
         "calcite-tab-title",
         "calcite-tab",
         "calcite-input",
+        "calcite-color-picker-swatch",
         "calcite-color-picker-hex-input",
         "calcite-tabs",
         "calcite-tab-nav",
-        "calcite-button",
-        "calcite-color-picker-swatch"
+        "calcite-button"
       ],
       "dependencyGraph": {
         "calcite-color-picker": [
           "calcite-tab-title",
           "calcite-tab",
           "calcite-input",
+          "calcite-color-picker-swatch",
           "calcite-color-picker-hex-input",
           "calcite-tabs",
           "calcite-tab-nav",
-          "calcite-button",
-          "calcite-color-picker-swatch"
+          "calcite-button"
         ],
         "calcite-tab-title": [
           "calcite-icon"
@@ -4582,7 +4684,11 @@
         ],
         "calcite-color-picker-hex-input": [
           "calcite-input",
-          "calcite-color-picker-swatch"
+          "calcite-input-number"
+        ],
+        "calcite-input-number": [
+          "calcite-progress",
+          "calcite-icon"
         ],
         "calcite-button": [
           "calcite-loader",
@@ -4616,6 +4722,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "alphaChannel",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "alpha-channel",
+          "reflectToAttr": false,
+          "docs": "When true, the component will allow updates to the color's alpha value.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "hexLabel",
           "type": "string",
@@ -4623,8 +4746,14 @@
           "attr": "hex-label",
           "reflectToAttr": false,
           "docs": "Specifies accessible label for the input field.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `messages` instead"
+            }
+          ],
           "default": "\"Hex\"",
+          "deprecation": "use `messages` instead",
           "values": [
             {
               "type": "string"
@@ -4766,9 +4895,9 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "The Hex value.",
+          "docs": "The hex value.",
           "docsTags": [],
-          "default": "normalizeHex(DEFAULT_COLOR.hex())",
+          "default": "normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true\n  )",
           "values": [
             {
               "type": "string"
@@ -4802,13 +4931,7 @@
           "docsTags": []
         }
       ],
-      "listeners": [
-        {
-          "event": "keydown",
-          "capture": true,
-          "passive": false
-        }
-      ],
+      "listeners": [],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -4817,17 +4940,21 @@
       ],
       "dependencies": [
         "calcite-input",
-        "calcite-color-picker-swatch"
+        "calcite-input-number"
       ],
       "dependencyGraph": {
         "calcite-color-picker-hex-input": [
           "calcite-input",
-          "calcite-color-picker-swatch"
+          "calcite-input-number"
         ],
         "calcite-input": [
           "calcite-progress",
           "calcite-icon"
         ],
+        "calcite-input-number": [
+          "calcite-progress",
+          "calcite-icon"
+        ],
         "calcite-color-picker": [
           "calcite-color-picker-hex-input"
         ]
@@ -4914,16 +5041,12 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "calcite-color-picker",
-        "calcite-color-picker-hex-input"
+        "calcite-color-picker"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "calcite-color-picker": [
           "calcite-color-picker-swatch"
-        ],
-        "calcite-color-picker-hex-input": [
-          "calcite-color-picker-swatch"
         ]
       }
     },
@@ -7864,7 +7987,7 @@
       ],
       "usage": {
         "Basic": "Renders a basic flow with a couple `calcite-panel`s.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"one, two, three, four\">\n    <!-- image -->\n  </calcite-panel>\n  <calcite-panel heading=\"tell me that you love me more\">\n    <!-- image -->\n  </calcite-panel>\n</calcite-flow>\n```\n",
-        "Menu-actions-and-footer-actions": "Renders a flow with menu-actions and footer-actions in the form of buttons.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\n    <button slot=\"header-menu-actions\">Reset</button>\n    <button slot=\"header-menu-actions\">Rename</button>\n    <button slot=\"footer-actions\">Save</button>\n    <button slot=\"footer-actions\">Cancel</button>\n  </calcite-panel>\n</calcite-flow>\n```\n"
+        "Menu-actions-and-footer-actions": "Renders a flow with menu-actions and footer in the form of buttons.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\n    <button slot=\"header-menu-actions\">Reset</button>\n    <button slot=\"header-menu-actions\">Rename</button>\n    <button slot=\"footer\">Save</button>\n    <button slot=\"footer\">Cancel</button>\n  </calcite-panel>\n</calcite-flow>\n```\n"
       },
       "props": [],
       "methods": [
@@ -7937,7 +8060,7 @@
         },
         {
           "name": "slot",
-          "text": "footer-actions - A slot for adding `calcite-button`s to the component's footer."
+          "text": "footer-actions - [Deprecated] A slot for adding `calcite-button`s to the component's footer."
         },
         {
           "name": "slot",
@@ -8194,7 +8317,13 @@
         }
       ],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--calcite-flow-item-footer-padding",
+          "annotation": "prop",
+          "docs": "Specifies the padding of the component's footer."
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -8214,7 +8343,7 @@
         },
         {
           "name": "footer-actions",
-          "docs": "A slot for adding `calcite-button`s to the component's footer."
+          "docs": "[Deprecated] A slot for adding `calcite-button`s to the component's footer."
         },
         {
           "name": "header-actions-end",
@@ -11460,7 +11589,9 @@
         }
       ],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "calcite-color-picker-hex-input"
+      ],
       "dependencies": [
         "calcite-progress",
         "calcite-icon"
@@ -11469,6 +11600,9 @@
         "calcite-input-number": [
           "calcite-progress",
           "calcite-icon"
+        ],
+        "calcite-color-picker-hex-input": [
+          "calcite-input-number"
         ]
       }
     },
@@ -13147,6 +13281,15 @@
         }
       ],
       "events": [
+        {
+          "event": "calciteListChange",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Emits when any of the list item selections have changed.",
+          "docsTags": []
+        },
         {
           "event": "calciteListFilter",
           "detail": "void",
@@ -13168,6 +13311,11 @@
           "capture": false,
           "passive": false
         },
+        {
+          "event": "calciteListItemSelect",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "calciteInternalListItemSelect",
           "capture": false,
@@ -14906,7 +15054,7 @@
         },
         {
           "name": "slot",
-          "text": "footer-actions - A slot for adding buttons to the footer."
+          "text": "footer-actions - [Deprecated] A slot for adding buttons to the footer."
         },
         {
           "name": "slot",
@@ -15144,7 +15292,13 @@
         }
       ],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--calcite-panel-footer-padding",
+          "annotation": "prop",
+          "docs": "Specifies the padding of the component's footer."
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -15164,7 +15318,7 @@
         },
         {
           "name": "footer-actions",
-          "docs": "A slot for adding buttons to the footer."
+          "docs": "[Deprecated] A slot for adding buttons to the footer."
         },
         {
           "name": "header-actions-end",