@esri/solutions-components 0.6.22 → 0.6.25

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

@@ -0,0 +1,728 @@
+/*!
+ * 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 } from './index-0740c914.js';
+import { u as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, x as setRequestedIcon } from './dom-923ca11d.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-0029bf3d.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-76c0c1d9.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-943c5248.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-976a6630.js';
+import { K as KindIcons } from './resources-9158321b.js';
+import { g as getBreakpoints } from './responsive-4d7ef153.js';
+import { c as createObserver } from './observers-115d1b4b.js';
+import { l as loadModules } from './loadModules-687a30c5.js';
+import { g as getLocaleComponentStrings } from './locale-6be4e8f0.js';
+import './guid-99d025c6.js';
+import './resources-bb8600a6.js';
+import './key-5ab69c42.js';
+import './_commonjsHelpers-d5f9d613.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.9.0
+ */
+const DURATIONS = {
+  slow: 14000,
+  medium: 10000,
+  fast: 6000,
+};
+const SLOTS = {
+  actionsEnd: "actions-end",
+  title: "title",
+  message: "message",
+  link: "link",
+};
+const CSS = {
+  actionsEnd: "actions-end",
+  close: "close",
+  container: "container",
+  containerBottom: "container--bottom",
+  containerBottomEnd: "container--bottom-end",
+  containerBottomStart: "container--bottom-start",
+  containerQueued: "container--queued",
+  containerTop: "container--top",
+  containerTopEnd: "container--top-end",
+  containerTopStart: "container--top-start",
+  content: "content",
+  contentContainer: "content-container",
+  dismissProgress: "dismiss-progress",
+  footer: "footer",
+  icon: "icon",
+  containerSlottedInShell: "container--slotted-in-shell",
+  queueCount: "queue-count",
+  queueCountActive: "queue-count--active",
+  textContainer: "text-container",
+};
+
+const alertCss = "/**\n * Do not edit directly\n * Generated on Thu, 11 May 2023 18:56:13 GMT\n */\n/* mixins & extensions */\n/* helper to properly scale internal durations */\n/**\n* Currently only used in Checkbox.\n*/\n/**\n* CSS Custom Properties\n*\n* These properties can be overridden using the component's tag as selector.\n*\n* @prop --calcite-alert-width: Specifies the width of the component.\n*/\n:host {\n  --calcite-alert-edge-distance: 2rem;\n  display: block;\n}\n\n.container {\n  pointer-events: none;\n  position: fixed;\n  z-index: var(--calcite-app-z-index-toast);\n  margin-inline: auto;\n  margin-block: 0px;\n  box-sizing: border-box;\n  display: flex;\n  inline-size: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: start;\n  opacity: 0;\n  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);\n  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  container: responsive-container/inline-size;\n  border-radius: var(--calcite-border-radius);\n  border-block-start: 0 solid transparent;\n  border-inline: 1px solid var(--calcite-ui-border-3);\n  border-block-end: 1px solid var(--calcite-ui-border-3);\n  inline-size: var(--calcite-alert-width);\n  max-inline-size: calc(100% - var(--calcite-alert-edge-distance) * 2);\n  transition: var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;\n}\n.container--bottom, .container--top {\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n}\n.container[class*=bottom] {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), 0);\n  inset-block-end: var(--calcite-alert-edge-distance);\n}\n.container[class*=top] {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);\n  inset-block-start: var(--calcite-alert-edge-distance);\n}\n.container[class*=start] {\n  inset-inline-start: var(--calcite-alert-edge-distance);\n  inset-inline-end: auto;\n}\n.container[class*=end] {\n  inset-inline-end: var(--calcite-alert-edge-distance);\n  inset-inline-start: auto;\n}\n\n.content {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  padding-block: var(--calcite-alert-spacing-token-small);\n  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);\n}\n\n.icon {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0px;\n  margin-block-end: var(--calcite-alert-spacing-token-large);\n  margin-inline-end: auto;\n}\n\n.close {\n  display: flex;\n  cursor: pointer;\n  align-items: flex-start;\n  justify-content: flex-end;\n  align-self: flex-start;\n  border-style: none;\n  background-color: transparent;\n  color: var(--calcite-ui-text-3);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  -webkit-appearance: none;\n  padding: var(--calcite-alert-spacing-token-large);\n  outline-color: transparent;\n}\n.close:focus {\n  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));\n  outline-offset: calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );\n}\n.close:hover, .close:focus {\n  background-color: var(--calcite-ui-foreground-2);\n  color: var(--calcite-ui-text-1);\n}\n.close:active {\n  background-color: var(--calcite-ui-foreground-3);\n}\n\n.queue-count {\n  visibility: hidden;\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: space-around;\n  align-self: stretch;\n  overflow: hidden;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: center;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-2);\n  opacity: 0;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n}\n.queue-count--active {\n  visibility: visible;\n  opacity: 1;\n}\n\n.dismiss-progress {\n  position: absolute;\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n}\n.dismiss-progress:after {\n  position: absolute;\n  inset-block-start: 0px;\n  display: block;\n  block-size: 2px;\n  content: \"\";\n  background-color: var(--calcite-alert-dismiss-progress-background);\n  inset-inline-end: 0;\n}\n\n.actions-end {\n  display: flex;\n  align-self: stretch;\n}\n\n.text-container {\n  display: flex;\n  min-inline-size: 0px;\n  flex: 1 1 0%;\n  flex-direction: column;\n  overflow-wrap: break-word;\n}\n\n.content-container {\n  display: flex;\n  flex: 1 1 0%;\n}\n\n.footer {\n  position: relative;\n  order: 1;\n  display: flex;\n  inline-size: 100%;\n  justify-content: flex-end;\n  padding-block-start: 1px;\n  block-size: var(--calcite-alert-footer-height);\n}\n.footer:before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 0px;\n  inset-inline: var(--calcite-alert-footer-divider-gap);\n  border-block-start: 1px solid var(--calcite-ui-border-3);\n}\n\n:host([scale=s]) {\n  --calcite-alert-width: 40em;\n  --calcite-alert-spacing-token-small: 0.5rem;\n  --calcite-alert-spacing-token-large: 0.75rem;\n  --calcite-alert-footer-height: 2rem;\n  --calcite-alert-footer-divider-gap: 0.125rem;\n}\n:host([scale=s]) slot[name=title]::slotted(*),\n:host([scale=s]) *::slotted([slot=title]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=s]) slot[name=message]::slotted(*),\n:host([scale=s]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n:host([scale=s]) slot[name=link]::slotted(*),\n:host([scale=s]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n:host([scale=s]) .queue-count {\n  margin-inline: 0.5rem;\n}\n:host([scale=s]) .container {\n  --calcite-alert-min-height: 3.5rem;\n}\n\n:host([scale=m]) {\n  --calcite-alert-width: 50em;\n  --calcite-alert-spacing-token-small: 0.75rem;\n  --calcite-alert-spacing-token-large: 1rem;\n  --calcite-alert-footer-height: 3rem;\n  --calcite-alert-footer-divider-gap: 0.25rem;\n}\n:host([scale=m]) slot[name=title]::slotted(*),\n:host([scale=m]) *::slotted([slot=title]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=m]) slot[name=message]::slotted(*),\n:host([scale=m]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=m]) slot[name=link]::slotted(*),\n:host([scale=m]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=m]) .queue-count {\n  margin-inline: 0.75rem;\n}\n:host([scale=m]) .container {\n  --calcite-alert-min-height: 4.1875rem;\n}\n\n:host([scale=l]) {\n  --calcite-alert-width: 60em;\n  --calcite-alert-spacing-token-small: 1rem;\n  --calcite-alert-spacing-token-large: 1.25rem;\n  --calcite-alert-footer-height: 4rem;\n  --calcite-alert-footer-divider-gap: 0.5rem;\n}\n:host([scale=l]) slot[name=title]::slotted(*),\n:host([scale=l]) *::slotted([slot=title]) {\n  margin-block-end: 0.25rem;\n  font-size: var(--calcite-font-size-1);\n  line-height: 1.375;\n}\n:host([scale=l]) slot[name=message]::slotted(*),\n:host([scale=l]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=l]) slot[name=link]::slotted(*),\n:host([scale=l]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=l]) .queue-count {\n  margin-inline: 1rem;\n}\n:host([scale=l]) .container {\n  --calcite-alert-min-height: 5.625rem;\n}\n\n:host([open]) .container:not(.container--queued) {\n  border-block-start-width: 2px;\n  opacity: 1;\n  pointer-events: initial;\n}\n:host([open]) .container:not(.container--queued)[class*=bottom] {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);\n}\n:host([open]) .container:not(.container--queued)[class*=top] {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);\n}\n\n:host([auto-close]) > .queue-count {\n  border-inline-end: 0 solid transparent;\n}\n\nslot[name=title]::slotted(*),\n*::slotted([slot=title]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-1);\n}\n\nslot[name=message]::slotted(*),\n*::slotted([slot=message]) {\n  margin: 0px;\n  display: inline;\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-normal);\n  color: var(--calcite-ui-text-2);\n  margin-inline-end: 0.5rem;\n}\n\nslot[name=link]::slotted(*),\n*::slotted([slot=link]) {\n  display: inline-flex;\n  color: var(--calcite-ui-text-link);\n}\n\n:host([kind=brand]) .container {\n  border-block-start-color: var(--calcite-ui-brand);\n}\n:host([kind=brand]) .container .icon {\n  color: var(--calcite-ui-brand);\n}\n\n:host([kind=info]) .container {\n  border-block-start-color: var(--calcite-ui-info);\n}\n:host([kind=info]) .container .icon {\n  color: var(--calcite-ui-info);\n}\n\n:host([kind=danger]) .container {\n  border-block-start-color: var(--calcite-ui-danger);\n}\n:host([kind=danger]) .container .icon {\n  color: var(--calcite-ui-danger);\n}\n\n:host([kind=success]) .container {\n  border-block-start-color: var(--calcite-ui-success);\n}\n:host([kind=success]) .container .icon {\n  color: var(--calcite-ui-success);\n}\n\n:host([kind=warning]) .container {\n  border-block-start-color: var(--calcite-ui-warning);\n}\n:host([kind=warning]) .container .icon {\n  color: var(--calcite-ui-warning);\n}\n\n:host([auto-close-duration=fast]) .dismiss-progress:after {\n  animation: dismissProgress 6000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=fast]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n:host([auto-close-duration=medium]) .dismiss-progress:after {\n  animation: dismissProgress 10000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=medium]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n:host([auto-close-duration=slow]) .dismiss-progress:after {\n  animation: dismissProgress 14000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=slow]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n@keyframes dismissProgress {\n  0% {\n    inline-size: 0px;\n    opacity: 0.75;\n  }\n  100% {\n    inline-size: 100%;\n    opacity: 1;\n  }\n}\n/**\n * Conditional styles for when Alert is slotted in Shell\n */\n.container--slotted-in-shell {\n  position: absolute;\n}\n\n@container responsive-container (min-width: 476px) {\n  .content {\n    flex-direction: row;\n  }\n  .close {\n    align-items: center;\n    align-self: stretch;\n  }\n  .icon {\n    justify-content: center;\n    margin-inline-end: 0;\n    margin-block: 0;\n    padding-inline-end: var(--calcite-alert-spacing-token-large);\n  }\n}\n@container responsive-container (min-width: 768px) {\n  .close {\n    align-self: stretch;\n  }\n  .footer {\n    inline-size: auto;\n    align-self: stretch;\n    order: initial;\n    block-size: inherit;\n  }\n  .footer:before {\n    content: none;\n  }\n  .icon {\n    padding-inline: var(--calcite-alert-spacing-token-large) 0;\n  }\n}\n:host([hidden]) {\n  display: none;\n}\n\n[hidden] {\n  display: none;\n}\n\n:host([calcite-hydrated-hidden]) {\n  visibility: hidden !important;\n  pointer-events: none;\n}";
+
+const Alert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 6);
+    this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
+    this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
+    this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
+    this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
+    this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
+    this.autoCloseTimeoutId = null;
+    this.resizeObserver = createObserver("resize", (entries) => (this.responsiveContainerWidth = entries[0].contentRect.width));
+    this.totalOpenTime = 0;
+    this.totalHoverTime = 0;
+    this.openTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+    };
+    /** close and emit calciteInternalAlertSync event with the updated queue payload */
+    this.closeAlert = () => {
+      this.autoCloseTimeoutId = null;
+      this.queued = false;
+      this.open = false;
+      this.queue = this.queue.filter((el) => el !== this.el);
+      this.determineActiveAlert();
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
+    };
+    this.actionsEndSlotChangeHandler = (event) => {
+      this.hasEndActions = slotChangeHasAssignedElement(event);
+    };
+    this.handleMouseOver = () => {
+      window.clearTimeout(this.autoCloseTimeoutId);
+      this.totalOpenTime = Date.now() - this.initialOpenTime;
+      this.lastMouseOverBegin = Date.now();
+    };
+    this.handleMouseLeave = () => {
+      const hoverDuration = Date.now() - this.lastMouseOverBegin;
+      const timeRemaining = DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
+      this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
+      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
+    };
+    this.open = false;
+    this.autoClose = false;
+    this.autoCloseDuration = "medium";
+    this.kind = "brand";
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.numberingSystem = undefined;
+    this.placement = "bottom";
+    this.scale = "m";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.slottedInShell = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+    this.hasEndActions = false;
+    this.queue = [];
+    this.queueLength = 0;
+    this.queued = false;
+    this.responsiveContainerWidth = undefined;
+  }
+  openHandler() {
+    onToggleOpenCloseComponent(this);
+    if (this.open && !this.queued) {
+      this.calciteInternalAlertRegister.emit();
+    }
+    if (!this.open) {
+      this.queue = this.queue.filter((el) => el !== this.el);
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
+    }
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  updateDuration() {
+    if (this.autoClose && this.autoCloseTimeoutId) {
+      window.clearTimeout(this.autoCloseTimeoutId);
+      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    connectLocalized(this);
+    connectMessages(this);
+    const open = this.open;
+    if (open && !this.queued) {
+      this.calciteInternalAlertRegister.emit();
+    }
+    if (this.transitionEl) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.transitionEl);
+    }
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
+    this.breakpoints = breakpoints;
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    setComponentLoaded(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.transitionEl);
+  }
+  disconnectedCallback() {
+    var _a;
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
+      detail: { alert: this.el },
+    }));
+    window.clearTimeout(this.autoCloseTimeoutId);
+    window.clearTimeout(this.queueTimeout);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    this.slottedInShell = false;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  render() {
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      signDisplay: "always",
+    };
+    const { hasEndActions } = this;
+    const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this;
+    const role = autoClose ? "alert" : "alertdialog";
+    const widthBreakpoints = this.breakpoints.width;
+    const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small;
+    const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small;
+    const hidden = !open;
+    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    const hasQueuedAlerts = this.queueLength > 1;
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerQueued]: queued,
+        [`${CSS.container}--${placement}`]: true,
+        [CSS.containerSlottedInShell]: this.slottedInShell,
+      }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, h("div", { class: CSS.contentContainer }, effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null, h("div", { class: CSS.content }, effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null, h("div", { class: CSS.textContainer }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })))), lessThanSmall ? this.renderCloseButton() : null, h("div", { class: CSS.footer, hidden: !hasEndActions && !hasQueuedAlerts }, this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null), greaterOrEqualThanSmall ? this.renderCloseButton() : null, open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
+  }
+  renderCloseButton() {
+    return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, type: "button",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+  }
+  renderQueueCount() {
+    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
+    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
+    return (h("div", { class: {
+        [CSS.queueCount]: true,
+        [CSS.queueCountActive]: this.queueLength > 1,
+      }, key: "queue-count" }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+  }
+  renderActionsEnd() {
+    return (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+  }
+  renderIcon(icon) {
+    return (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: this.scale === "l" ? "m" : "s" })));
+  }
+  // when an alert is opened or closed, update queue and determine active alert
+  alertSync(event) {
+    if (this.queue !== event.detail.queue) {
+      this.queue = event.detail.queue;
+    }
+    this.queueLength = this.queue.length;
+    this.determineActiveAlert();
+    event.stopPropagation();
+  }
+  // when an alert is first registered, trigger a queue sync
+  alertRegister() {
+    if (this.open && !this.queue.includes(this.el)) {
+      this.queued = true;
+      this.queue.push(this.el);
+    }
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
+    this.determineActiveAlert();
+  }
+  // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.
+  alertUnregister(event) {
+    const queue = this.queue.filter((el) => el !== event.detail.alert);
+    this.queue = queue;
+    window.dispatchEvent(new CustomEvent("calciteInternalAlertSync", {
+      detail: { queue },
+    }));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component's "close" button (the first focusable item). */
+  async setFocus() {
+    await componentFocusable(this);
+    const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
+    if (!this.closeButton && !alertLinkEl) {
+      return;
+    }
+    else if (alertLinkEl) {
+      return alertLinkEl.setFocus();
+    }
+    else if (this.closeButton) {
+      this.closeButton.focus();
+    }
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  /** determine which alert is active */
+  determineActiveAlert() {
+    var _a;
+    if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
+      this.openAlert();
+      if (this.autoClose && !this.autoCloseTimeoutId) {
+        this.initialOpenTime = Date.now();
+        this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+      }
+    }
+    else {
+      return;
+    }
+  }
+  onBeforeOpen() {
+    this.calciteAlertBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteAlertOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteAlertBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteAlertClose.emit();
+  }
+  /** remove queued class after animation completes */
+  openAlert() {
+    window.clearTimeout(this.queueTimeout);
+    this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openHandler"],
+    "messageOverrides": ["onMessagesChange"],
+    "autoCloseDuration": ["updateDuration"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
+Alert.style = alertCss;
+
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}";
+
+const EditCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeEdit = createEvent(this, "closeEdit", 7);
+    this.editsComplete = createEvent(this, "editsComplete", 7);
+    /**
+     * boolean: When true the Editor widget should be closed
+     */
+    this._shouldClose = false;
+    this.graphics = undefined;
+    this.mapView = undefined;
+    this.open = false;
+    this.graphicIndex = 0;
+    this._editorLoading = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Watch for changes to the graphics and update the feature widget
+   */
+  async graphicsWatchHandler() {
+    if (this.graphics.length === 0) {
+      this._shouldClose = false;
+      this.closeEdit.emit();
+    }
+  }
+  async openWatchHandler(v) {
+    var _a;
+    if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
+      this._editorLoading = true;
+      this._initEditorWidget();
+      if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+        await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+        this._shouldClose = true;
+      }
+      this._editorLoading = false;
+    }
+    if (!v) {
+      this._shouldClose = false;
+      this.closeEdit.emit();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._initModules();
+    await this._getTranslations();
+  }
+  /**
+   * Special handeling when used with layer-table.
+   * This allows us to only fetch graphics when the modal is opened rather than with every render of the layer-table.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillRender() {
+    var _a, _b;
+    if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
+      this._layer = this.graphics[0].layer;
+      if (this._layerEditHandle) {
+        this._layerEditHandle.remove();
+      }
+      this._layerEditHandle = this._layer.on("edits", () => {
+        this._editorLoading = true;
+        this.editsComplete.emit();
+        this._shouldClose = false;
+        this._initEditorWidget();
+        void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+        this._shouldClose = true;
+        this._editorLoading = false;
+      });
+    }
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    var _a;
+    // This is a temp workaround hopefully...this._editingDisabled should reflect the current state but does not
+    // when you use MULTI edit mode...is fine in SINGLE
+    const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
+      !this.graphics[0].layer.editingEnabled : true;
+    const tableNodeClass = this._editorLoading ? "display-none" : "";
+    const loadingClass = this._editorLoading ? "" : "display-none";
+    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   */
+  async _initModules() {
+    const [Editor, reactiveUtils] = await loadModules([
+      "esri/widgets/Editor",
+      "esri/core/reactiveUtils"
+    ]);
+    this.Editor = Editor;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Init the Editor widget so we can display the popup content
+   *
+   * @returns void
+   */
+  _initEditorWidget() {
+    if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
+      if (this._editor) {
+        this._editor.destroy();
+      }
+      const container = document.createElement("div");
+      this._editor = new this.Editor({
+        allowedWorkflows: "update",
+        view: this.mapView,
+        visibleElements: {
+          snappingControls: false,
+          sketchTooltipControls: false
+        },
+        container
+      });
+      if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
+        this._editHandle.remove();
+        this._attachmentHandle.remove();
+        this._activeWorkflowHandle.remove();
+      }
+      this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
+        this._editor.viewModel.state === "editing-attachment" ||
+        this._editor.viewModel.state === "creating-features", () => {
+        this._shouldClose = false;
+      });
+      this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
+        if (this._shouldClose) {
+          this._shouldClose = false;
+          this.closeEdit.emit();
+        }
+        else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+          void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+          this._shouldClose = true;
+        }
+      });
+      this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
+        if ((activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "update-table-record" || (activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "create-features") {
+          this._shouldClose = false;
+        }
+      });
+      // had issues with destroy before adding like this
+      this._editContainer.appendChild(container);
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "graphics": ["graphicsWatchHandler"],
+    "open": ["openWatchHandler"]
+  }; }
+};
+EditCard.style = editCardCss;
+
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
+
+const InfoCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.graphics = undefined;
+    this.isLoading = false;
+    this.mapView = undefined;
+    this.zoomAndScrollToSelected = undefined;
+    this._alertOpen = false;
+    this._count = "";
+    this._editRecordOpen = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Watch for changes to the graphic and update the feature widget
+   */
+  async graphicsWatchHandler() {
+    var _a;
+    if (!this._features) {
+      await this._initFeaturesWidget();
+    }
+    if (this.graphics.length > 0) {
+      const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+      this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
+      this._features.open({
+        features: this.graphics
+      });
+    }
+    else {
+      this._features.clear();
+      this._features.close();
+    }
+  }
+  /**
+   * Watch for changes to the mapView and re-init the Feature widget
+   */
+  async mapViewWatchHandler() {
+    return await this._initFeaturesWidget();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the current selected feature from the Features widget
+   *
+   * @returns Promise resolving with the current feature
+   */
+  async getSelectedFeature() {
+    return this._features.selectedFeature;
+  }
+  /**
+   * Respond to and close the edit record display
+   *
+   * @returns a promise when the operation has completed
+   */
+  async closeEdit() {
+    this._editRecordOpen = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._initModules();
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    var _a, _b, _c;
+    const loadingClass = this.isLoading ? "" : "display-none";
+    const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
+    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
+    const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Features, reactiveUtils] = await loadModules([
+      "esri/widgets/Features",
+      "esri/core/reactiveUtils"
+    ]);
+    this.Features = Features;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Init the Feature widget so we can display the popup content
+   *
+   * @returns a promise when the operation has completed
+   *
+   * @protected
+   */
+  async _initFeaturesWidget() {
+    return await this.mapView.when(() => {
+      if (!this._features) {
+        this._features = new this.Features({
+          view: this.mapView,
+          container: "features-node",
+          visibleElements: {
+            actionBar: false,
+            closeButton: false,
+            heading: true
+          }
+        });
+        if (this.zoomAndScrollToSelected) {
+          this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+            if (i > -1) {
+              this.selectionChanged.emit(this._features.selectedFeature);
+            }
+          });
+        }
+      }
+      else {
+        this._features.view = this.mapView;
+      }
+    });
+  }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
+  /**
+   * Close the edit record
+   *
+   * @returns void
+   */
+  _editRecordClosed() {
+    this._editRecordOpen = false;
+  }
+  /**
+   * Open the edit record
+   *
+   * @returns void
+   */
+  _openEditRecord() {
+    if (this._editEnabled) {
+      this._editRecordOpen = true;
+    }
+    else {
+      this._alertOpen = true;
+    }
+  }
+  /**
+   * Go to the previous feature in the features widget
+   *
+   * @returns void
+   */
+  _back() {
+    this._features.previous();
+    this._count = this._getCount();
+  }
+  /**
+   * Go to the next feature in the features widget
+   *
+   * @returns void
+   */
+  _next() {
+    this._features.next();
+    this._count = this._getCount();
+  }
+  /**
+   * Get the current index of total string
+   *
+   * @returns the index of total string
+   */
+  _getCount() {
+    var _a, _b, _c;
+    const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+    const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+    return this._translations.indexOfTotal
+      .replace("{{index}}", index)
+      .replace("{{total}}", total);
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "graphics": ["graphicsWatchHandler"],
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+};
+InfoCard.style = infoCardCss;
+
+export { Alert as calcite_alert, EditCard as edit_card, InfoCard as info_card };