@esri/solutions-components 0.3.5 → 0.3.7

package/dist/solutions-components/p-95ec8062.entry.js

@@ -0,0 +1,173 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './p-c023e6a1.js';
+import { c as createObserver } from './p-9a9955db.js';
+import { u as updateHostInteraction } from './p-7daea1df.js';
+import { t as toAriaBoolean } from './p-83166522.js';
+import './p-729708a3.js';
+import './p-a80b3880.js';
+
+/*!
+ * 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.97
+ */
+const CSS = {
+  button: "button",
+  buttonTextVisible: "button--text-visible",
+  buttonCompact: "button--compact",
+  iconContainer: "icon-container",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
+  textContainer: "text-container",
+  textContainerVisible: "text-container--visible"
+};
+const TEXT = {
+  loading: "Loading"
+};
+const SLOTS = {
+  tooltip: "tooltip"
+};
+
+const actionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}: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}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=clear]) .button,:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:transparent;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus,:host([active][appearance=transparent]) .button,:host([active][appearance=transparent]) .button:hover,:host([active][appearance=transparent]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button,:host([appearance=transparent][loading]) .button,:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-text-3);-webkit-margin-end:0px;margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button--text-visible .text-container--visible{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}";
+
+const Action = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionClick = createEvent(this, "calciteActionClick", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When `true`, the component is highlighted.
+     */
+    this.active = false;
+    /** Specifies the appearance of the component. */
+    this.appearance = "solid";
+    /**
+     * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+     */
+    this.compact = false;
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /**
+     * When `true`, indicates unread changes.
+     */
+    this.indicator = false;
+    /**
+     * Specifies the text label to display while loading.
+     *
+     * @default "Loading"
+     */
+    this.intlLoading = TEXT.loading;
+    /**
+     * When `true`, a busy indicator is displayed.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the component.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+    this.mutationObserver = createObserver("mutation", () => forceUpdate(this));
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleTooltipSlotChange = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      const tooltip = tooltips[0];
+      if (tooltip) {
+        tooltip.referenceElement = this.buttonEl;
+      }
+    };
+    this.calciteActionClickHandler = () => {
+      if (!this.disabled) {
+        this.calciteActionClick.emit();
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTextContainer() {
+    const { text, textEnabled } = this;
+    const textContainerClasses = {
+      [CSS.textContainer]: true,
+      [CSS.textContainerVisible]: textEnabled
+    };
+    return text ? (h("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
+  }
+  renderIconContainer() {
+    var _a;
+    const { loading, icon, scale, el, intlLoading } = this;
+    const iconScale = scale === "l" ? "m" : "s";
+    const loaderScale = scale === "l" ? "l" : "m";
+    const calciteLoaderNode = loading ? (h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: loaderScale })) : null;
+    const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const iconNode = calciteLoaderNode || calciteIconNode;
+    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const slotContainerNode = (h("div", { class: {
+        [CSS.slotContainer]: true,
+        [CSS.slotContainerHidden]: loading
+      } }, h("slot", null)));
+    return hasIconToDisplay ? (h("div", { "aria-hidden": "true", class: CSS.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+  }
+  render() {
+    const { compact, disabled, loading, textEnabled, label, text } = this;
+    const ariaLabel = label || text;
+    const buttonClasses = {
+      [CSS.button]: true,
+      [CSS.buttonTextVisible]: textEnabled,
+      [CSS.buttonCompact]: compact
+    };
+    return (h(Host, { onClick: this.calciteActionClickHandler }, h("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange })));
+  }
+  get el() { return getElement(this); }
+};
+Action.style = actionCss;
+
+export { Action as calcite_action };

package/dist/solutions-components/p-991ee695.js

@@ -8,4 +8,112 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
  */
-function r(r){const{r:n,g:t,b:s}=r;return`#${n.toString(16).padStart(2,"0")}${t.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`.toLowerCase()}const n=/^[0-9A-F]$/i,t=/^#[0-9A-F]{3}$/i,s=/^#[0-9A-F]{6}$/i;function e(r){return u(r)||i(r)}function u(r){return r&&4===r.length&&t.test(r)}function i(r){return r&&7===r.length&&s.test(r)}function a(n){return(n=n.toLowerCase()).startsWith("#")||(n=`#${n}`),u(n)?r(f(n)):n}function f(r){if(!e(r))return null;if(3===(r=r.replace("#","")).length){const[n,t,s]=r.split("");return{r:parseInt(`${n}${n}`,16),g:parseInt(`${t}${t}`,16),b:parseInt(`${s}${s}`,16)}}return{r:parseInt(r.slice(0,2),16),g:parseInt(r.slice(2,4),16),b:parseInt(r.slice(4,6),16)}}const c={HEX:"hex",HEXA:"hexa",RGB_CSS:"rgb-css",RGBA_CSS:"rgba-css",HSL_CSS:"hsl-css",HSLA_CSS:"hsla-css"},o="rgb",l="rgba",h="hsl",$="hsla",b="hsv",g="hsva";function p(r){if("string"==typeof r){if(r.startsWith("#")){const{length:n}=r;if(4===n||7===n)return c.HEX;if(5===n||9===n)return c.HEXA}if(r.startsWith("rgba("))return c.RGBA_CSS;if(r.startsWith("rgb("))return c.RGB_CSS;if(r.startsWith("hsl("))return c.HSL_CSS;if(r.startsWith("hsla("))return c.HSLA_CSS}if("object"==typeof r){if(S(r,"r","g","b"))return S(r,"a")?l:o;if(S(r,"h","s","l"))return S(r,"a")?$:h;if(S(r,"h","s","v"))return S(r,"a")?g:b}return null}function S(r,...n){return n.every((n=>n&&r&&`${n}`in r))}function A(r,n){return(null==r?void 0:r.rgbNumber())===(null==n?void 0:n.rgbNumber())}export{c as C,i as a,n as b,A as c,f as h,e as i,a as n,p,r}
+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());
+}
+
+export { CSSColorMode as C, isLonghandHex as a, hexChar as b, colorEqual as c, hexToRGB as h, isValidHex as i, normalizeHex as n, parseMode as p, rgbToHex as r };

package/dist/solutions-components/p-9a57dab7.entry.js

@@ -0,0 +1,213 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement } from './p-c023e6a1.js';
+import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './p-991ee695.js';
+import { c as color } from './p-93d3119d.js';
+import { f as focusElement } from './p-83166522.js';
+import { T as TEXT } from './p-374a5031.js';
+import './p-3b010ce1.js';
+import './p-729708a3.js';
+import './p-a80b3880.js';
+
+/*!
+ * 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.97
+ */
+const CSS = {
+  container: "container",
+  preview: "preview",
+  input: "input"
+};
+
+const colorPickerHexInputCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}.container{display:inline-grid;inline-size:100%;align-items:center;grid-template-columns:1fr auto}.preview{grid-column:2/3;pointer-events:none;margin-block:0px;margin-inline:0.25rem;display:flex;align-items:center}.preview,.input{grid-row:1}.input{grid-column:1/3;inline-size:100%;text-transform:uppercase}";
+
+const DEFAULT_COLOR = color();
+const ColorPickerHexInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
+     *
+     * When `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`.
+     */
+    this.allowEmpty = false;
+    /**
+     * Accessible name for the Hex input.
+     *
+     * @default "Hex"
+     */
+    this.intlHex = TEXT.hex;
+    /**
+     * Accessible name for the Hex input when there is no color selected.
+     *
+     * @default "No color"
+     */
+    this.intlNoColor = TEXT.noColor;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /**
+     * The Hex value.
+     */
+    this.value = normalizeHex(DEFAULT_COLOR.hex());
+    this.onCalciteInternalInputBlur = () => {
+      const node = this.inputNode;
+      const inputValue = node.value;
+      const hex = `#${inputValue}`;
+      const willClearValue = this.allowEmpty && !inputValue;
+      if (willClearValue || (isValidHex(hex) && isLonghandHex(hex))) {
+        return;
+      }
+      // manipulating DOM directly since rerender doesn't update input value
+      node.value =
+        this.allowEmpty && !this.internalColor
+          ? ""
+          : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
+    };
+    this.onInputChange = () => {
+      this.internalSetValue(this.inputNode.value, this.value);
+    };
+    /**
+     * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
+     */
+    this.internalColor = DEFAULT_COLOR;
+    this.previousNonNullValue = this.value;
+    this.storeInputRef = (node) => {
+      this.inputNode = node;
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    const { allowEmpty, value } = this;
+    if (value) {
+      const normalized = normalizeHex(value);
+      if (isValidHex(normalized)) {
+        this.internalSetValue(normalized, normalized, false);
+      }
+      return;
+    }
+    if (allowEmpty) {
+      this.internalSetValue(null, null, false);
+    }
+  }
+  handleValueChange(value, oldValue) {
+    this.internalSetValue(value, oldValue, false);
+  }
+  // using @Listen as a workaround for VDOM listener not firing
+  onInputKeyDown(event) {
+    const { altKey, ctrlKey, metaKey, shiftKey } = event;
+    const { internalColor, value } = this;
+    const { key } = event;
+    if (key === "Tab" || key === "Enter") {
+      this.onInputChange();
+      return;
+    }
+    const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
+    const oldValue = this.value;
+    if (isNudgeKey) {
+      if (!value) {
+        this.internalSetValue(this.previousNonNullValue, oldValue);
+        event.preventDefault();
+        return;
+      }
+      const direction = key === "ArrowUp" ? 1 : -1;
+      const bump = shiftKey ? 10 : 1;
+      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
+      event.preventDefault();
+      return;
+    }
+    const withModifiers = altKey || ctrlKey || metaKey;
+    const singleChar = key.length === 1;
+    const validHexChar = hexChar.test(key);
+    if (singleChar && !withModifiers && !validHexChar) {
+      event.preventDefault();
+    }
+  }
+  onPaste(event) {
+    const hex = event.clipboardData.getData("text");
+    if (isValidHex(hex)) {
+      event.preventDefault();
+      this.inputNode.value = hex.slice(1);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const { intlHex, value } = this;
+    const hexInputValue = this.formatForInternalInput(value);
+    return (h("div", { class: CSS.container }, h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, onPaste: this.onPaste, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.inputNode);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  internalSetValue(value, oldValue, emit = true) {
+    if (value) {
+      const normalized = normalizeHex(value);
+      if (isValidHex(normalized)) {
+        const { internalColor } = this;
+        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
+        this.internalColor = color(normalized);
+        this.previousNonNullValue = normalized;
+        this.value = normalized;
+        if (changed && emit) {
+          this.calciteColorPickerHexInputChange.emit();
+        }
+        return;
+      }
+    }
+    else if (this.allowEmpty) {
+      this.internalColor = null;
+      this.value = null;
+      if (emit) {
+        this.calciteColorPickerHexInputChange.emit();
+      }
+      return;
+    }
+    this.value = oldValue;
+  }
+  formatForInternalInput(hex) {
+    return hex ? hex.replace("#", "") : "";
+  }
+  nudgeRGBChannels(color$1, amount) {
+    return color.rgb(color$1.array().map((channel) => channel + amount));
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValueChange"]
+  }; }
+};
+ColorPickerHexInput.style = colorPickerHexInputCss;
+
+export { ColorPickerHexInput as calcite_color_picker_hex_input };

package/dist/solutions-components/p-9a9955db.js

@@ -8,4 +8,44 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
  */
-function t(t,s,n){const i=function(t){class s extends window.MutationObserver{constructor(t){super(t),this.observedEntry=[],this.callback=t}observe(t,s){return this.observedEntry.push({target:t,options:s}),super.observe(t,s)}unobserve(t){const s=this.observedEntry.filter((s=>s.target!==t));this.observedEntry=[],this.callback(super.takeRecords(),this),this.disconnect(),s.forEach((t=>this.observe(t.target,t.options)))}}return"intersection"===t?window.IntersectionObserver:"mutation"===t?s:window.ResizeObserver}(t);return new i(s,n)}export{t as c}
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+function createObserver(type, callback, options) {
+  const Observer = getObserver(type);
+  return new Observer(callback, options);
+}
+function getObserver(type) {
+  // based on https://github.com/whatwg/dom/issues/126#issuecomment-1049814948
+  class ExtendedMutationObserver extends window.MutationObserver {
+    constructor(callback) {
+      super(callback);
+      this.observedEntry = [];
+      this.callback = callback;
+    }
+    observe(target, options) {
+      this.observedEntry.push({ target, options });
+      return super.observe(target, options);
+    }
+    unobserve(target) {
+      const newObservedEntries = this.observedEntry.filter((observed) => observed.target !== target);
+      this.observedEntry = [];
+      this.callback(super.takeRecords(), this);
+      this.disconnect();
+      newObservedEntries.forEach((observed) => this.observe(observed.target, observed.options));
+    }
+  }
+  return (function () {
+    return (type === "intersection"
+      ? window.IntersectionObserver
+      : type === "mutation"
+        ? ExtendedMutationObserver
+        : window.ResizeObserver);
+  })();
+}
+
+export { createObserver as c };

package/dist/solutions-components/p-9c1ebc90.js

@@ -3,19 +3,38 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import{c as a}from"./p-4307dacd.js";
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */const{state:e,onChange:s}=a({managedLayers:[],highlightHandle:void 0,layerNameHash:{}}),n=new CustomEvent("managedLayersChanged",{bubbles:!0,cancelable:!1,composed:!0});s("managedLayers",(()=>{dispatchEvent(n)}));export{e as s}
+import { c as createStore } from './p-4307dacd.js';
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const { state, onChange } = createStore({
+  // List of layers added and managed by the component
+  managedLayers: [],
+  // Handle: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle
+  highlightHandle: undefined,
+  // ILayerHash title: id lookup to be used across components
+  layerNameHash: {}
+});
+const managedLayersChangedEvent = new CustomEvent("managedLayersChanged", {
+  bubbles: true,
+  cancelable: false,
+  composed: true
+});
+onChange("managedLayers", () => {
+  dispatchEvent(managedLayersChangedEvent);
+});
+
+export { state as s };