@esri/hub-web-components 0.36.1 → 0.37.0

package/dist/components/arcgis-layout-container/customElement.d.ts

@@ -1,50 +1,312 @@
-/// <reference types="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ILayoutNode, IProcessLayoutOptions, Layout, ILayout, ILayoutPublishEventDetail, ILayoutNodeRepositionEventDetail, ILayoutResetEventDetail, HTMLConfigurableLayoutNodeElement } from '@esri/hub-common';
-import { getLayoutNodeConfig } from '../layouts/utils/getLayoutNodeConfig';
-import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
-import { ILayoutNodeActivateEventDetail, ILayoutNodeAddEventDetail, ILayoutNodeEditEventDetail } from '../layouts/utils/layout-event-types';
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { IProcessLayoutOptions, Layout, ILayoutPublishEventDetail, ILayoutResetEventDetail } from "@esri/hub-common";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/**
- * @internal
- * Main container component for rendering and managing
- * an ILayout and its nodes. Orchestrates layout
- * composition, editing, and interaction logic.
- */
-export declare class ArcgisLayoutContainer extends LitElement {
-    /** The layout to render */
-    layout: Layout;
-    /** @default false */
-    debug: boolean;
-    /**
-     * Whether the layout is in edit mode
-     *
-     * @default false
-     */
-    isEditMode: boolean;
-    /**
-     * Whether the layout is currently being published.
-     * We use this to disable and show a loading state
-     * on the "Publish" button in the edit toolbar.
-     *
-     * @default false
-     */
-    isPublishing: boolean;
-    /**
-     * Contextual information used to process various
-     * parts of the layout system (e.g. processing the
-     * layout itself, generating addable layout nodes,
-     * etc.)
-     */
-    options: IProcessLayoutOptions;
-    /** Event emitted when the layout is edited */
-    readonly arcgisHubLayoutChanged: TargetedEvent<this, void>;
-    /** Event emitted when the layout editor is exited */
-    readonly arcgisHubLayoutEditorExit: TargetedEvent<this, void>;
-    /** Event emitted when the layout is published */
-    readonly arcgisHubLayoutPublished: TargetedEvent<this, ILayoutPublishEventDetail>;
-    /** Event emitted when the layout is reset */
-    readonly arcgisHubLayoutReset: TargetedEvent<this, ILayoutResetEventDetail>;
-    /** Event emitted for telemetry */
-    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
-}
+/** @internal */
+export abstract class ArcgisLayoutContainer extends LitElement {
+  /**
+   * Localization strings
+   *
+   * @internal
+   */
+  protected _messages: {
+      addButtonLabel: string;
+      addElementPopoverLabel: string;
+      addElementPopoverHeading: string;
+      addElementListLabel: string;
+      editModeActivatedLiveRegion: string;
+      editModeDeactivatedLiveRegion: string;
+      invalidDirtyStateMessage: string;
+      layoutNodeHidden: string;
+      close: string;
+      configurableNodes: {
+          default: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              up: string;
+              down: string;
+              show: string;
+              hide: string;
+          };
+          gallery: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          image: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+              errors: { required: string; };
+              editor: {
+                  image: string;
+                  altText: string;
+              };
+          };
+          embed: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          timeline: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          text: {
+              ariaLabel: string;
+              default: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+              errors: { required: string; };
+              placeholder: string;
+          };
+          metrics: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          status: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          metadata: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+      };
+      layoutNodeControls: {
+          a11yLabel: string;
+          repositionUpDisabledTooltip: string;
+          repositionDownDisabledTooltip: string;
+          deletePremiumOnlyTooltip: string;
+          readOnlyTooltip: string;
+          deletePopover: {
+              heading: string;
+              body: string;
+              button: string;
+          };
+      };
+      toolbar: {
+          exit: string;
+          publish: string;
+          noChanges: string;
+          invalidLayout: string;
+          moreOptions: string;
+          resetLabel: string;
+      };
+      resetLayout: {
+          heading: string;
+          message: string;
+          cancelButton: string;
+          confirmButton: string;
+      };
+  } & T9nMeta<{
+      addButtonLabel: string;
+      addElementPopoverLabel: string;
+      addElementPopoverHeading: string;
+      addElementListLabel: string;
+      editModeActivatedLiveRegion: string;
+      editModeDeactivatedLiveRegion: string;
+      invalidDirtyStateMessage: string;
+      layoutNodeHidden: string;
+      close: string;
+      configurableNodes: {
+          default: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              up: string;
+              down: string;
+              show: string;
+              hide: string;
+          };
+          gallery: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          image: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+              errors: { required: string; };
+              editor: {
+                  image: string;
+                  altText: string;
+              };
+          };
+          embed: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          timeline: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          text: {
+              ariaLabel: string;
+              default: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+              errors: { required: string; };
+              placeholder: string;
+          };
+          metrics: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          status: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+          metadata: {
+              ariaLabel: string;
+              label: string;
+              edit: string;
+              delete: string;
+              description: string;
+              up: string;
+              down: string;
+          };
+      };
+      layoutNodeControls: {
+          a11yLabel: string;
+          repositionUpDisabledTooltip: string;
+          repositionDownDisabledTooltip: string;
+          deletePremiumOnlyTooltip: string;
+          readOnlyTooltip: string;
+          deletePopover: {
+              heading: string;
+              body: string;
+              button: string;
+          };
+      };
+      toolbar: {
+          exit: string;
+          publish: string;
+          noChanges: string;
+          invalidLayout: string;
+          moreOptions: string;
+          resetLabel: string;
+      };
+      resetLayout: {
+          heading: string;
+          message: string;
+          cancelButton: string;
+          confirmButton: string;
+      };
+  }>;
+  /** @default false */
+  accessor debug: boolean;
+  /**
+   * Whether the layout is in edit mode
+   *
+   * @default false
+   */
+  accessor isEditMode: boolean;
+  /**
+   * Whether the layout is currently being published.
+   * We use this to disable and show a loading state
+   * on the "Publish" button in the edit toolbar.
+   *
+   * @default false
+   */
+  accessor isPublishing: boolean;
+  /** The layout to render */
+  accessor layout: Layout;
+  /**
+   * Contextual information used to process various
+   * parts of the layout system (e.g. processing the
+   * layout itself, generating addable layout nodes,
+   * etc.)
+   */
+  accessor options: IProcessLayoutOptions;
+  /** Event emitted when the layout is edited */
+  readonly arcgisHubLayoutChanged: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Event emitted when the layout editor is exited */
+  readonly arcgisHubLayoutEditorExit: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Event emitted when the layout is published */
+  readonly arcgisHubLayoutPublished: import("@arcgis/lumina").TargetedEvent<this, ILayoutPublishEventDetail>;
+  /** Event emitted when the layout is reset */
+  readonly arcgisHubLayoutReset: import("@arcgis/lumina").TargetedEvent<this, ILayoutResetEventDetail>;
+  /** Event emitted for telemetry */
+  readonly hubTelemetry: import("@arcgis/lumina").TargetedEvent<this, Record<string, unknown>>;
+  readonly "@eventTypes": {
+    arcgisHubLayoutChanged: ArcgisLayoutContainer["arcgisHubLayoutChanged"]["detail"];
+    arcgisHubLayoutEditorExit: ArcgisLayoutContainer["arcgisHubLayoutEditorExit"]["detail"];
+    arcgisHubLayoutPublished: ArcgisLayoutContainer["arcgisHubLayoutPublished"]["detail"];
+    arcgisHubLayoutReset: ArcgisLayoutContainer["arcgisHubLayoutReset"]["detail"];
+    hubTelemetry: ArcgisLayoutContainer["hubTelemetry"]["detail"];
+  };
+}

package/dist/components/arcgis-layout-container/customElement.js

@@ -1,10 +1,11 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { g as D, c as I } from "../../chunks/runtime.js";
-import { html as p } from "lit-html";
-import { keyed as $ } from "lit-html/directives/keyed.js";
-import { LitElement as M, useContextProvider as T, createEvent as v, noShadowRoot as O } from "@arcgis/lumina";
+import { css as M, html as p } from "lit";
+import { keyed as $ } from "lit/directives/keyed.js";
+import { LitElement as T, createEvent as v, noShadowRoot as O } from "@arcgis/lumina";
+import { useContextProvider as V } from "@arcgis/lumina/context";
 import { createRef as x, ref as R } from "lit/directives/ref.js";
-import { l as V } from "../../chunks/layoutContext.js";
-import { css as H } from "@lit/reactive-element/css-tag.js";
+import { l as H } from "../../chunks/layoutContext.js";
 import { layoutNodeTags as S, cloneObject as f, findNodeById as L, setProp as j, getProp as U, deepMerge as B, Logger as _, createId as z, getWithDefault as F } from "@esri/hub-common";
 import { g as q } from "../../chunks/state.js";
 import { p as G } from "../../chunks/processLayout.js";
@@ -14,10 +15,7 @@ import { u as Q } from "../../chunks/useT9n.js";
 import { migrateSchema as X } from "@esri/hub-components";
 import { f as A } from "../../chunks/findColumnAndNodeIndex.js";
 import { dictionary as b } from "@esri/telemetry-dictionary-hub";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
-const Y = H`@layer{arcgis-layout-container{display:block;--offset-top: 0px;calcite-shell{position:static;font-size:inherit}#arcgis-layout-container-edit-mode-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}arcgis-layout-container[is-edit-mode]{height:calc(100vh - var(--offset-top));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
+const Y = M`@layer{arcgis-layout-container{display:block;--offset-top: 0px;calcite-shell{position:static;font-size:inherit}#arcgis-layout-container-edit-mode-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}arcgis-layout-container[is-edit-mode]{height:calc(100vh - var(--offset-top));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
 function Z(i, t) {
   const s = ["order", "offset", "width"], e = [];
   return s.forEach((a) => {
@@ -74,13 +72,7 @@ function it(i) {
   }), t) : (t.push("Layout must be defined."), t);
 }
 async function et(i) {
-  switch (i) {
-    case "arcgis-text-card":
-      return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
-    // ...other cases...
-    default:
-      return ((t) => t);
-  }
+  return i === "arcgis-text-card" ? (await import("../../chunks/migrateTextCard.js")).migrateTextCard : ((t) => t);
 }
 function st(i) {
   const t = f(i);
@@ -305,9 +297,9 @@ function gt(i, t) {
   }
   return s;
 }
-class pt extends M {
+class pt extends T {
   constructor() {
-    super(), this._messages = Q({ blocking: !0 }), this.#t = T({ context: V }), this._isNodeDirty = !1, this._layoutRef = x(), this._layoutNodeEditorRef = x(), this._handleExitEditMode = async (t) => {
+    super(), this._messages = Q({ blocking: !0 }), this.#t = V({ context: H }), this._isNodeDirty = !1, this._layoutRef = x(), this._layoutNodeEditorRef = x(), this._handleExitEditMode = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
     }, this._handlePublishLayout = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutPublished.emit({

package/dist/components/arcgis-layout-container/index.d.ts

@@ -1,10 +1 @@
-import "../arcgis-layout-editor-toolbar/index.js";
-import "@esri/calcite-components/components/calcite-shell-panel";
-import "@esri/calcite-components/components/calcite-panel";
-import "@esri/calcite-components/components/calcite-action";
-import "../arcgis-layout-node-editor/index.js";
-import "@esri/calcite-components/components/calcite-dialog";
-import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-shell";
-import "../arcgis-layout/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-layout-editor-toolbar/customElement.js

@@ -1,17 +1,15 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { html as e } from "lit-html";
-import { LitElement as s, useContextConsumer as o } from "@arcgis/lumina";
-import { css as a } from "@lit/reactive-element/css-tag.js";
+import { css as e, html as s } from "lit";
+import { LitElement as o } from "@arcgis/lumina";
+import { useContextConsumer as a } from "@arcgis/lumina/context";
 import { focusElement as l } from "@arcgis/toolkit/dom";
 import { createRef as r, ref as n } from "lit/directives/ref.js";
 import { l as c } from "../../chunks/layoutContext.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
-const d = a`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
-class u extends s {
+const d = e`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
+class u extends o {
   constructor() {
-    super(...arguments), this.#t = o({ context: c }), this._exitButtonRef = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
+    super(...arguments), this.#t = a({ context: c }), this._exitButtonRef = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
   }
   static {
     this.properties = { exitEditMode: 0, publishLayout: 0, resetLayout: 0, isLayoutDirty: 5, isLayoutValid: 5, isPublishing: 5 };
@@ -35,7 +33,7 @@ class u extends s {
   }
   render() {
     const t = this._messages.toolbar.exit;
-    return e`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${n(this._exitButtonRef)}></calcite-action><div slot=content-end><arcgis-ref-tooltip .isSlottedElDisabled=${this._isPublishDisabled} .text=${this._disabledPublishTooltip}><calcite-button .disabled=${this._isPublishDisabled} .loading=${this.isPublishing} @click=${this.publishLayout} round>${this._messages.toolbar.publish}</calcite-button></arcgis-ref-tooltip><calcite-dropdown offset-distance=5><calcite-button appearance=transparent icon-start=ellipsis .label=${this._messages.toolbar.moreOptions} round scale=m slot=trigger></calcite-button><calcite-dropdown-group selection-mode=none><calcite-dropdown-item .label=${this._messages.toolbar.resetLabel} @click=${this.resetLayout}>${this._messages.toolbar.resetLabel}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></div></calcite-navigation>`;
+    return s`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${n(this._exitButtonRef)}></calcite-action><div slot=content-end><arcgis-ref-tooltip .isSlottedElDisabled=${this._isPublishDisabled} .text=${this._disabledPublishTooltip}><calcite-button .disabled=${this._isPublishDisabled} .loading=${this.isPublishing} @click=${this.publishLayout} round>${this._messages.toolbar.publish}</calcite-button></arcgis-ref-tooltip><calcite-dropdown offset-distance=5><calcite-button appearance=transparent icon-start=ellipsis .label=${this._messages.toolbar.moreOptions} round scale=m slot=trigger></calcite-button><calcite-dropdown-group selection-mode=none><calcite-dropdown-item .label=${this._messages.toolbar.resetLabel} @click=${this.resetLayout}>${this._messages.toolbar.resetLabel}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></div></calcite-navigation>`;
   }
 }
 i("arcgis-layout-editor-toolbar", u);

package/dist/components/arcgis-layout-node-controls/customElement.js

@@ -1,19 +1,17 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
-import { html as u } from "lit-html";
-import { LitElement as h, useContextConsumer as p, createEvent as i } from "@arcgis/lumina";
-import { css as g } from "@lit/reactive-element/css-tag.js";
+import { css as u, html as h } from "lit";
+import { LitElement as p, createEvent as i, noShadowRoot as g } from "@arcgis/lumina";
+import { useContextConsumer as y } from "@arcgis/lumina/context";
 import { getWithDefault as o, getProp as s } from "@esri/hub-common";
 import { i as f } from "../../chunks/isNodeVisible.js";
 import { dictionary as a } from "@esri/telemetry-dictionary-hub";
 import { f as r } from "../../chunks/findColumnAndNodeIndex.js";
-import { l as y } from "../../chunks/layoutContext.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
-const m = g`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
-class b extends h {
+import { l as m } from "../../chunks/layoutContext.js";
+const b = u`@layer{layout-node-controls{position:absolute}layout-node-controls .delete-popover-content{padding:0 1rem 1rem;margin:0}}`;
+class N extends p {
   constructor() {
-    super(), this.#e = p({ context: y, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.arcgisLayoutDeactivateNode = i(), this.arcgisLayoutDeleteNode = i(), this.arcgisLayoutNodeEditorOpen = i(), this.arcgisLayoutNodeReposition = i(), this.arcgisLayoutNodeVisibilityChange = i(), this.hubTelemetry = i(), this.listen("calcitePopoverOpen", (e) => {
+    super(), this.#e = y({ context: m, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.arcgisLayoutDeactivateNode = i(), this.arcgisLayoutDeleteNode = i(), this.arcgisLayoutNodeEditorOpen = i(), this.arcgisLayoutNodeReposition = i(), this.arcgisLayoutNodeVisibilityChange = i(), this.hubTelemetry = i(), this.listen("calcitePopoverOpen", (e) => {
       e.stopPropagation();
     }), this.listen("calcitePopoverClose", (e) => {
       e.stopPropagation(), this.arcgisLayoutDeactivateNode.emit({
@@ -25,7 +23,10 @@ class b extends h {
     this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, activatedNode: 0, layoutElement: 0, messages: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = m;
+    this.styles = b;
+  }
+  static {
+    this.shadowRootOptions = g;
   }
   #e;
   get #t() {
@@ -108,7 +109,7 @@ class b extends h {
         initialFocus: this.layoutNodeEditorRef,
         extraContainers: [this.layoutNodeEditorRef]
       } : void 0;
-      e = u`<calcite-popover .focusTrapOptions=${d} offset-distance=1 offset-skidding=-4 .label=${l} .open=${this.node.id === this.activatedNode?.id} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${n} trigger-disabled><calcite-action-bar expand-disabled floating layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${o(t, "i18n.label", this.messages.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${t.disableAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? o(t, "i18n.hideLabel", this.messages.configurableNodes.default.hide) : o(t, "i18n.showLabel", this.messages.configurableNodes.default.show)}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${o(t, "i18n.repositionUpLabel", this.messages.configurableNodes.default.up)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.moveDownTooltipText}><calcite-action .disabled=${!this.#o} icon=arrow-down @click=${this._onMoveDownButtonClick} .text=${o(t, "i18n.repositionDownLabel", this.messages.configurableNodes.default.down)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.node.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node.readOnly || t.disableEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${o(t, "i18n.edit", this.messages.configurableNodes.default.edit)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.deleteTooltipText}><calcite-action .disabled=${this.node.readOnly || t.disableDelete} icon=trash id=delete-button @click=${this._onDeleteButtonClick} .text=${o(t, "i18n.delete", this.messages.configurableNodes.default.delete)}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${d} .heading=${s(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${s(this.messages, "layoutNodeControls.deletePopover.heading")} offset-distance=2 overlay-positioning=fixed placement=bottom-start pointer-disabled reference-element=delete-button><div class="delete-popover-content"><p>${s(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${s(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
+      e = h`<calcite-popover .focusTrapOptions=${d} offset-distance=1 offset-skidding=-4 .label=${l} .open=${this.node.id === this.activatedNode?.id} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${n} top-layer-disabled trigger-disabled><calcite-action-bar expand-disabled floating layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${o(t, "i18n.label", this.messages.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${t.disableAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? o(t, "i18n.hideLabel", this.messages.configurableNodes.default.hide) : o(t, "i18n.showLabel", this.messages.configurableNodes.default.show)}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${o(t, "i18n.repositionUpLabel", this.messages.configurableNodes.default.up)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.moveDownTooltipText}><calcite-action .disabled=${!this.#o} icon=arrow-down @click=${this._onMoveDownButtonClick} .text=${o(t, "i18n.repositionDownLabel", this.messages.configurableNodes.default.down)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.node.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node.readOnly || t.disableEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${o(t, "i18n.edit", this.messages.configurableNodes.default.edit)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.deleteTooltipText}><calcite-action .disabled=${this.node.readOnly || t.disableDelete} icon=trash id=delete-button @click=${this._onDeleteButtonClick} .text=${o(t, "i18n.delete", this.messages.configurableNodes.default.delete)}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${d} .heading=${s(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${s(this.messages, "layoutNodeControls.deletePopover.heading")} offset-distance=2 overlay-positioning=fixed placement=bottom-start pointer-disabled reference-element=delete-button><div class="delete-popover-content"><p>${s(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${s(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
     }
     return e;
   }
@@ -116,7 +117,7 @@ class b extends h {
     return this.renderControls();
   }
 }
-c("arcgis-layout-node-controls", b);
+c("arcgis-layout-node-controls", N);
 export {
-  b as ArcgisLayoutNodeControls
+  N as ArcgisLayoutNodeControls
 };

package/dist/components/arcgis-layout-node-editor/customElement.js

@@ -1,18 +1,16 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
-import { LitElement as u, useContextConsumer as d, createEvent as l, noShadowRoot as c } from "@arcgis/lumina";
+import { LitElement as u, createEvent as d, noShadowRoot as l } from "@arcgis/lumina";
+import { useContextConsumer as c } from "@arcgis/lumina/context";
 import { getProp as s, deepMerge as h, cloneObject as g, getWithDefault as a } from "@esri/hub-common";
 import { createRef as f, ref as C } from "lit/directives/ref.js";
-import { html as r } from "lit";
-import { css as p } from "@lit/reactive-element/css-tag.js";
+import { css as p, html as r } from "lit";
 import { ArcgisLayoutNodeEditorDynamicTag as m } from "./layout-node-editor-dynamic-tag/customElement.js";
 import { l as v } from "../../chunks/layoutContext.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
 const y = p`@layer{arcgis-configuration-editor:focus{--focus-color: var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:solid 2px var(--focus-color)}}`;
 class E extends u {
   constructor() {
-    super(...arguments), this._configEditorRef = f(), this.#o = d({ context: v }), this._values = {}, this.arcgisLayoutNodeChange = l();
+    super(...arguments), this._configEditorRef = f(), this.#o = c({ context: v }), this._values = {}, this.arcgisLayoutNodeChange = d();
   }
   static {
     this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
@@ -21,7 +19,7 @@ class E extends u {
     this.styles = y;
   }
   static {
-    this.shadowRootOptions = c;
+    this.shadowRootOptions = l;
   }
   #o;
   get _messages() {

package/dist/components/arcgis-layout-node-editor/layout-node-editor-dynamic-tag/customElement.js

@@ -1,8 +1,6 @@
-import { html as t } from "lit-html";
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
+import { html as t } from "lit";
 import { spreadProps as d, spreadEvents as o } from "@open-wc/lit-helpers";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

package/dist/components/arcgis-layout-node-wrapper/customElement.js

@@ -1,6 +1,8 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { LitElement as h, useContextConsumer as u, createEvent as s, nothing as r, safeClassMap as c } from "@arcgis/lumina";
-import { css as p } from "@lit/reactive-element/css-tag.js";
+import { LitElement as h, createEvent as s, nothing as r, safeClassMap as c } from "@arcgis/lumina";
+import { useContextConsumer as u } from "@arcgis/lumina/context";
+import { css as p, html as i } from "lit";
 import { cloneObject as f, getWithDefault as n } from "@esri/hub-common";
 import { l as v } from "../../chunks/layoutContext.js";
 import { g, a as m, i as b } from "../../chunks/interpolate-translations.js";
@@ -8,10 +10,6 @@ import { g as y } from "../../chunks/state.js";
 import { dictionary as N } from "@esri/telemetry-dictionary-hub";
 import { slotChangeGetAssignedElements as x } from "@arcgis/toolkit/dom";
 import { i as C } from "../../chunks/isNodeVisible.js";
-import { html as i } from "lit";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
 const $ = p`#card-label{position:fixed;position-anchor:--highlight-anchor;inset-block-end:calc(anchor(top) + 3px);inset-inline-start:calc(anchor(left) - 3px);background-color:#fff;border:solid 1px var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius);font-size:var(--calcite-font-size--2);line-height:var(--calcite-font-line-height-fixed-sm);font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);box-shadow:0 0 16px #00000029}#aria-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#overlay{position:absolute;position-anchor:--highlight-anchor;position-area:center;width:anchor-size(width);height:anchor-size(height);display:flex;justify-content:center;align-items:center}#overlay.hidden{background-color:#fff6;outline:1.5px dashed var(--calcite-color-border-1);calcite-chip{opacity:1}}#add-button{position:fixed;position-anchor:--highlight-anchor;justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - 15px);z-index:2}.slot-container{display:flex;flex:1;min-width:0;anchor-name:--highlight-anchor}:host{--calcite-popover-border-color: #dedede;--calcite-popover-corner-radius: 4px;#card-label,calcite-button{opacity:0}display:flex}::slotted(*){flex:1;min-width:0}#overlay:focus-visible{outline:none}:host([is-edit-mode]):has(.is-focused){#card-label{opacity:1}}:host([is-edit-mode]:not([activated],[has-nav-card]):hover),:host([is-edit-mode]:not([activated],[has-nav-card]):focus){--calcite-internal-color-focus: var(--calcite-color-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:var(--calcite-border-width-sm);#card-label,calcite-button{opacity:1}}:host([is-edit-mode][activated]:not([has-nav-card])){--calcite-internal-color-focus: var(--calcite-color-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:var(--calcite-border-width-md)}.popover-content{max-height:19.3rem;overflow-y:auto;border-radius:var(--calcite-popover-corner-radius)}calcite-list-item{--calcite-list-border-color: transparent}`;
 function _(l = {}, e) {
   const t = g(l);
@@ -117,7 +115,7 @@ class w extends h {
   }
   renderAddPopover() {
     let e;
-    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = i`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} @calcitePopoverOpen=${this._handlePopoverOpen} .open=${this.isPopoverOpen} reference-element=add-button><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => i`<calcite-list-item data-tag=${t.tag ?? r} .disabled=${t.disableAdd} icon-start=${t.icon ?? r} .label=${t.i18n.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
+    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = i`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} @calcitePopoverOpen=${this._handlePopoverOpen} .open=${this.isPopoverOpen} reference-element=add-button top-layer-disabled><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => i`<calcite-list-item data-tag=${t.tag ?? r} .disabled=${t.disableAdd} icon-start=${t.icon ?? r} .label=${t.i18n.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
   }
   render() {
     return i`${this.renderLabel()}<div class=${c({

package/dist/components/arcgis-layout-row/customElement.js

@@ -1,14 +1,12 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-import { keyed as s } from "lit-html/directives/keyed.js";
+import { html as r } from "lit";
+import { keyed as s } from "lit/directives/keyed.js";
 import { LitElement as m, noShadowRoot as d, safeClassMap as e, safeStyleMap as c } from "@arcgis/lumina";
 import { a as g } from "../../chunks/getResponsiveClasses.js";
 import { Logger as a } from "@esri/hub-common";
 import { spreadProps as p } from "@open-wc/lit-helpers";
 import { a as y } from "../../chunks/typeGuards.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.1 */
 class $ extends m {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;