@esri/hub-web-components 0.12.4 → 0.13.1

package/dist/components/arcgis-layout-node-controls/index.d.ts

@@ -2,4 +2,5 @@ import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
 export * from "./customElement.js";

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

@@ -2,4 +2,5 @@ import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
 export * from "./customElement.js";

package/dist/components/arcgis-layout-node-editor/customElement.d.ts

@@ -3,22 +3,18 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { IConfigurationValues, ILayoutNodeChangeEventDetail, ILayoutNodeConfig, LayoutNode } from '@esri/hub-common';
 import { PropertyValues } from 'lit';
 
-interface IEditorValues {
-    value: IConfigurationValues;
-}
 /** @private */
 export declare class ArcgisLayoutNodeEditor extends LitElement {
     /** The layout node to edit */
-    node: LayoutNode;
+    node: LayoutNode | undefined;
     /**
      * The configuration for the layout node being edited.
      * This is used to build the schema for the configuration
      * editor as well as map values back to the node's
      * properties when changes are made in the editor.
      */
-    layoutNodeConfig?: ILayoutNodeConfig;
+    layoutNodeConfig: ILayoutNodeConfig | undefined;
     setFocus(): void;
     /** Emitted when the node's editor values change. */
     readonly arcgisLayoutNodeChange: TargetedEvent<this, ILayoutNodeChangeEventDetail>;
 }
-export {};

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

@@ -1,16 +1,17 @@
-import { c as n } from "../../chunks/runtime.js";
-import { LitElement as c, createEvent as l, noShadowRoot as u } from "@arcgis/lumina";
-import { getProp as a, cloneObject as d, mergeObjects as h } from "@esri/hub-common";
-import { createRef as g, ref as f } from "lit/directives/ref.js";
-import { html as m } from "lit";
-import { css as v } from "@lit/reactive-element/css-tag.js";
+import { c as r } from "../../chunks/runtime.js";
+import { LitElement as n, createEvent as d, noShadowRoot as u } from "@arcgis/lumina";
+import { getProp as l, mergeObjects as c, getWithDefault as e } from "@esri/hub-common";
+import { createRef as h, ref as g } from "lit/directives/ref.js";
+import { html as a } from "lit";
+import { css as f } from "@lit/reactive-element/css-tag.js";
+import { ArcgisLayoutNodeEditorDynamicTag as C } from "./layout-node-editor-dynamic-tag/customElement.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-const p = v`@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 y extends c {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+const p = f`@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 m extends n {
   constructor() {
-    super(...arguments), this._configEditorRef = g(), this._values = { value: {} }, this.arcgisLayoutNodeChange = l();
+    super(...arguments), this._configEditorRef = h(), this._values = {}, this.arcgisLayoutNodeChange = d();
   }
   static {
     this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
@@ -21,29 +22,6 @@ class y extends c {
   static {
     this.shadowRootOptions = u;
   }
-  get _schemas() {
-    const o = this.layoutNodeConfig?.editor?.schema || {
-      type: "object",
-      properties: {
-        value: {}
-      }
-    }, t = this.layoutNodeConfig?.editor?.uiSchema || {
-      type: "Layout",
-      elements: [
-        {
-          scope: "/properties/value",
-          type: "Control",
-          options: {
-            control: this.layoutNodeConfig?.editor?.tag
-          }
-        }
-      ]
-    };
-    return { schema: o, uiSchema: t };
-  }
-  get _hasEditorTag() {
-    return !!this.layoutNodeConfig?.editor?.tag;
-  }
   setFocus() {
     this._configEditorRef.value?.setFocus();
   }
@@ -54,26 +32,35 @@ class y extends c {
     (o.has("layoutNodeConfig") || o.has("node")) && this.setFocus();
   }
   init() {
-    if (!this.layoutNodeConfig)
+    if (!this.node || !this.layoutNodeConfig)
       return;
-    const o = a(this.layoutNodeConfig, "valuesProp"), e = (a(this.layoutNodeConfig, "editor.valuesInCallback") || ((i) => i))(o ? this.node.properties?.[o] : this.node.properties);
-    this._values = this._hasEditorTag ? { value: e } : e;
+    const o = l(this.layoutNodeConfig, "editor.valuesInCallback") || ((t) => t);
+    this._values = o(this.node.properties);
   }
   _handleConfigurationEditorChange(o) {
     o.stopPropagation();
-    const { values: t = {}, valid: e } = o.detail, i = d(this._hasEditorTag ? this._values.value : this._values), r = this._hasEditorTag ? t.value : t, s = h(r, i);
-    this._values = this._hasEditorTag ? { value: s } : s, this.arcgisLayoutNodeChange.emit({
+    const { values: t = {}, valid: s } = o.detail, i = c(t, this._values);
+    this._values = i, this.arcgisLayoutNodeChange.emit({
       layoutNodeConfig: this.layoutNodeConfig,
-      values: s,
-      valid: e,
+      values: i,
+      valid: s,
       id: this.node.id
     });
   }
+  renderEditor() {
+    const o = e(this.layoutNodeConfig || {}, "editor.inputChangeEvent", "arcgisHubGalleryCardEditorChange"), t = e(this.layoutNodeConfig || {}, "editor.valuesProp", "values");
+    return this.layoutNodeConfig?.editor?.tag ? C({ tagName: this.layoutNodeConfig.editor.tag, props: {
+      inputChangeEvent: o,
+      onInputChangeEvent: this._handleConfigurationEditorChange,
+      [t]: this._values,
+      ...this.layoutNodeConfig.editor.properties || {}
+    } }) : a`<arcgis-configuration-editor @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${g(this._configEditorRef)}></arcgis-configuration-editor>`;
+  }
   render() {
-    return m`<div data-element=layout-card-editor><arcgis-configuration-editor @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} .schema=${this._schemas.schema} .uiSchema=${this._schemas.uiSchema} .values=${this._values} ${f(this._configEditorRef)}></arcgis-configuration-editor></div>`;
+    return !this.node || !this.layoutNodeConfig ? a`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
   }
 }
-n("arcgis-layout-node-editor", y);
+r("arcgis-layout-node-editor", m);
 export {
-  y as ArcgisLayoutNodeEditor
+  m as ArcgisLayoutNodeEditor
 };

package/dist/components/arcgis-layout-node-editor/index.d.ts

@@ -1,2 +1,3 @@
 import "@esri/hub-components/dist/components/arcgis-configuration-editor.js";
+import "@esri/hub-components/dist/components/arcgis-skeleton-loader.js";
 export * from "./customElement.js";

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

@@ -1,2 +1,3 @@
 import "@esri/hub-components/dist/components/arcgis-configuration-editor.js";
+import "@esri/hub-components/dist/components/arcgis-skeleton-loader.js";
 export * from "./customElement.js";

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

@@ -0,0 +1,17 @@
+/// <reference types="../../index.d.ts" />
+import { JsxNode } from '@arcgis/lumina';
+import { LayoutEditorTag } from '@esri/hub-common';
+interface ArcgisLayoutEditorProps {
+    tagName: LayoutEditorTag;
+    props: Record<string, unknown>;
+}
+/**
+ * @private
+ * Functional component to dynamically render an ILayout
+ * editor based on the tagName provided. This allows us
+ * to get around inherent limitations of Lumina:
+ * https://qawebgis.esri.com/components/lumina/jsx#dynamic-tag-name
+ * https://qawebgis.esri.com/components/lumina/jsx#spread-attributes
+ */
+export declare function ArcgisLayoutNodeEditorDynamicTag({ tagName, props }: ArcgisLayoutEditorProps): JsxNode;
+export {};

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

@@ -0,0 +1,31 @@
+import { html as t } from "lit-html";
+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.13/esri/copyright.txt for details.
+v0.13.1 */
+function g({ tagName: c, props: r }) {
+  const n = r.onInputChangeEvent || void 0, a = {
+    ...r
+  }, i = {
+    [r.inputChangeEvent]: n
+  };
+  let e;
+  switch (c) {
+    case "arcgis-hub-gallery-card-editor":
+      e = t`<arcgis-hub-gallery-card-editor .values=${r.values} ${d(a)} ${o(i)}></arcgis-hub-gallery-card-editor>`;
+      break;
+    case "arcgis-hub-embed-card-editor":
+      e = t`<arcgis-hub-embed-card-editor ${d(a)} ${o(i)}></arcgis-hub-embed-card-editor>`;
+      break;
+    case "arcgis-hub-timeline-editor":
+      e = t`<arcgis-hub-timeline-editor ${d(a)} ${o(i)}></arcgis-hub-timeline-editor>`;
+      break;
+    // Add more cases as needed
+    default:
+      e = t`<div ${d(a)} ${o(i)}></div>`;
+  }
+  return e;
+}
+export {
+  g as ArcgisLayoutNodeEditorDynamicTag
+};

package/dist/components/arcgis-layout-node-editor/layout-node-editor-dynamic-tag/index.d.ts

@@ -0,0 +1,4 @@
+import "@esri/hub-components/dist/components/arcgis-hub-gallery-card-editor.js";
+import "@esri/hub-components/dist/components/arcgis-hub-embed-card-editor.js";
+import "@esri/hub-components/dist/components/arcgis-hub-timeline-editor.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,4 @@
+import "@esri/hub-components/dist/components/arcgis-hub-gallery-card-editor.js";
+import "@esri/hub-components/dist/components/arcgis-hub-embed-card-editor.js";
+import "@esri/hub-components/dist/components/arcgis-hub-timeline-editor.js";
+export * from "./customElement.js";

package/dist/components/arcgis-layout-node-highlight/customElement.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { HTMLConfigurableLayoutNodeElement, ILayoutNode, LayoutNode } from '@esri/hub-common';
+import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
+import { PropertyValues } from 'lit';
+import { IAddLayoutNodeConfiguration } from '../layouts/utils/getAddableLayoutNodes';
+export interface ILayoutNodeAddEventDetail {
+    adjacentNode: ILayoutNode;
+    position: "after" | "before";
+    config: IAddLayoutNodeConfiguration;
+}
+
+/** @private */
+export declare class ArcgisLayoutNodeHighlight extends LitElement {
+    /** The node being configured */
+    node?: LayoutNode;
+    highlightedNode?: LayoutNode;
+    readonly arcgisLayoutAddNode: TargetedEvent<this, ILayoutNodeAddEventDetail>;
+}

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

@@ -0,0 +1,171 @@
+import { c as h } from "../../chunks/runtime.js";
+import { LitElement as g, useContextConsumer as u, createEvent as p, noShadowRoot as m, nothing as l } from "@arcgis/lumina";
+import { css as f } from "@lit/reactive-element/css-tag.js";
+import { checkPermission as b, getProp as n, cloneObject as y, getWithDefault as v } from "@esri/hub-common";
+import { html as a } from "lit";
+import { l as N } from "../../chunks/messagesContext.js";
+import { g as x, i as C } from "../../chunks/interpolate-translations.js";
+import { m as P, i as _ } from "../../chunks/memoizeAsync.js";
+import { g as $ } from "../../chunks/state.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+const L = f`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-height: 30px;opacity:0;position:absolute;calcite-label{position:fixed;position-anchor:var(--anchor-element-name);inset-block:calc(anchor(top) - var(--label-height)) calc(anchor(top) + 2px);background-color:#fff;padding:2px 5px;border:solid 2px var(--calcite-ui-brand);border-bottom:none}calcite-button{position:fixed;position-anchor:var(--anchor-element-name);justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - var(--button-height) / 2)}calcite-list-item{--calcite-list-border-color: transparent;padding-inline-end:1rem}}.current-node+arcgis-layout-node-highlight{opacity:1}}`, E = [
+  {
+    tag: "arcgis-text-card",
+    label: "{{layoutNodeControls.configurableNodes.text.label:translate}}",
+    icon: "text",
+    defaults: {
+      html: "<p>Text card</p>"
+    }
+  },
+  {
+    tag: "arcgis-hub-image",
+    label: "{{layoutNodeControls.configurableNodes.image.label:translate}}",
+    icon: "image",
+    disabled: !0,
+    defaults: {
+      src: "https://placehold.co/300x200?text=Image",
+      alt: "Placeholder image"
+    }
+  },
+  {
+    tag: "arcgis-hub-embed-card",
+    label: "{{layoutNodeControls.configurableNodes.embed.label:translate}}",
+    icon: "embedded-content",
+    disabled: !0
+  },
+  {
+    tag: "arcgis-hub-gallery-card",
+    label: "{{layoutNodeControls.configurableNodes.gallery.label:translate}}",
+    icon: "gallery",
+    disabled: !0,
+    defaults: {
+      // NOTE: i don't know if this is what we want - just trying to find something workable for now
+      showEmptyState: !0,
+      cardConfig: {
+        appearance: {
+          layout: "grid-filled"
+        },
+        shouldLimitResults: !0,
+        limit: 5,
+        query: {
+          targetEntity: "item",
+          layout: "grid-filled",
+          filters: [
+            {
+              predicates: [{ orgid: ["{{context.portal.id}}"] }]
+            }
+          ]
+        }
+      }
+    }
+  }
+  // {
+  //   tag: "arcgis-hub-timeline",
+  //   label: "Timeline",
+  //   icon: "timeline-icon",
+  // },
+  // {
+  //   tag: "arcgis-hub-entity-metadata",
+  //   label: "Entity Metadata",
+  //   icon: "entity-metadata-icon",
+  // },
+  // {
+  //   tag: "arcgis-hub-entity-status-card",
+  //   label: "Entity Status Card",
+  //   icon: "entity-status-card-icon",
+  // },
+];
+async function O(r, e, t) {
+  let o = E.filter((s) => !s.permissions || s.permissions.length === 0 ? !0 : s.permissions.every((c) => b(c, t).access));
+  const i = {
+    context: t,
+    entity: e.entity ?? {}
+  }, d = {
+    messages: n(e, "translations")
+  };
+  return o = _(o, i, d), await Promise.resolve(o);
+}
+const I = P(O);
+class A extends g {
+  constructor() {
+    super(), this.#e = u({ context: N }), this.isPopoverOpen = !1, this.arcgisLayoutAddNode = p(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
+      this.isPopoverOpen = !0;
+    }), this.listen("calcitePopoverClose", (e) => {
+      this.isPopoverOpen = !1;
+    });
+  }
+  static {
+    this.properties = { config: 16, isPopoverOpen: 16, node: 0, highlightedNode: 0 };
+  }
+  static {
+    this.shadowRootOptions = m;
+  }
+  static {
+    this.styles = L;
+  }
+  get addButtonId() {
+    return this.node ? `add-button-${this.node.id}` : void 0;
+  }
+  #e;
+  get _messages() {
+    return this.#e.value;
+  }
+  get referenceElement() {
+    return this.el.previousElementSibling;
+  }
+  get _layoutNodeConfig() {
+    if (!this.referenceElement || !this.node)
+      return;
+    let e = x(this.referenceElement, this.node);
+    return e && (e = C(this._messages, e)), y(e);
+  }
+  get _context() {
+    return $();
+  }
+  updated(e) {
+    const t = `--overlay-anchor-${this.node?.id}`;
+    this.el.style.setProperty("--anchor-element-name", t);
+  }
+  willUpdate(e) {
+    e.has("highlightedNode") && (!this.highlightedNode || this.node?.id !== this.highlightedNode.id) && (this.isPopoverOpen = !1);
+  }
+  async loadConfig() {
+    this.config || (this.config = await I({}, { translations: this._messages }, this._context));
+  }
+  _handleListItemSelect(e) {
+    const t = e.target.dataset.tag, o = this.config?.find((i) => i.tag === t);
+    if (this.node && o) {
+      const i = {
+        adjacentNode: this.node,
+        position: "after",
+        config: o
+      };
+      this.arcgisLayoutAddNode.emit(i);
+    }
+  }
+  renderLabel() {
+    let e;
+    if (this.node !== void 0 && this.highlightedNode !== void 0 && this.node.id === this.highlightedNode.id) {
+      const t = v(this._layoutNodeConfig ?? {}, "i18n.label", n(this._messages, "layoutNodeControls.configurableNodes.default.label"));
+      e = a`<calcite-label scale=l>${t}</calcite-label>`;
+    }
+    return e;
+  }
+  renderControls() {
+    let e;
+    return this.node && (e = a`<calcite-button icon-start=plus id=${this.addButtonId ?? l} .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
+  }
+  renderPopover() {
+    let e;
+    return this.node && this.addButtonId && (e = a`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} .open=${this.isPopoverOpen} .referenceElement=${this.addButtonId}><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => a`<calcite-list-item data-tag=${t.tag ?? l} .disabled=${t.disabled} icon-start=${t.icon ?? l} .label=${t.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></calcite-popover>`), e;
+  }
+  render() {
+    return a`${this.renderLabel()}${this.renderControls()}${this.renderPopover()}`;
+  }
+}
+h("arcgis-layout-node-highlight", A);
+export {
+  A as ArcgisLayoutNodeHighlight
+};

package/dist/components/arcgis-layout-node-highlight/index.d.ts

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
+export * from "./customElement.js";

package/dist/components/arcgis-layout-node-highlight/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
+export * from "./customElement.js";

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

@@ -4,8 +4,8 @@ import { LitElement as s } from "@arcgis/lumina";
 import { css as r } from "@lit/reactive-element/css-tag.js";
 import { u as n } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
 const a = r`:host{display:flex;justify-content:center;align-items:center;position:fixed;position-area:center;width:anchor-size(width);height:anchor-size(height);anchor-name:--overlay;pointer-events:none;outline:1.5px dashed var(--calcite-color-border-1)}.overlay{opacity:.6;background-color:#ffffffa6;width:100%;height:100%}.overlay-content{position:fixed}`;
 class c extends s {
   constructor() {

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

@@ -11,7 +11,7 @@ export declare class ArcgisLayoutRow extends LitElement {
      * tracked in order to show the node's configuration
      * controls and "active" state in the UI.
      */
-    currentNode?: ILayoutNode;
+    highlightedNode?: ILayoutNode;
     /**
      * Utility functions passed down to all child layout
      * components. For now, this is specifically needed to

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

@@ -1,45 +1,45 @@
 import { c as l } from "../../chunks/runtime.js";
 import { html as s } from "lit-html";
 import { keyed as e } from "lit-html/directives/keyed.js";
-import { LitElement as m, noShadowRoot as d, safeClassMap as i, safeStyleMap as c } from "@arcgis/lumina";
-import { a as p } from "../../chunks/getResponsiveClasses.js";
+import { LitElement as d, noShadowRoot as m, safeClassMap as i, safeStyleMap as g } from "@arcgis/lumina";
+import { a as c } from "../../chunks/getResponsiveClasses.js";
 import { Logger as a } from "@esri/hub-common";
-import { spreadProps as g } from "@open-wc/lit-helpers";
-import { a as y } from "../../chunks/typeGuards.js";
+import { spreadProps as p } from "@open-wc/lit-helpers";
+import { a as h } from "../../chunks/typeGuards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-class $ extends m {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+class y extends d {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, currentNode: 0, utils: 0, debug: 5, isEditMode: 5 };
+    this.properties = { node: 0, highlightedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = d;
+    this.shadowRootOptions = m;
   }
-  _getChildClasses(o) {
-    const t = p(o);
-    return o.id === this.currentNode?.id && t.push("current-node"), t;
+  _getChildClasses(t) {
+    const r = c(t);
+    return t.id === this.highlightedNode?.id && r.push("current-node"), r;
   }
   render() {
-    const { debug: o, utils: t } = this;
-    return this.node.children?.map((r) => {
-      const { id: n } = r;
-      if (!y(r)) {
+    const { debug: t, utils: r } = this;
+    return this.node.children?.map((o) => {
+      const { id: n } = o;
+      if (!h(o)) {
         a.warn(`Child with id ${n} in arcgis-layout-row is not a column.`);
         return;
       }
       try {
-        return e(r.id, s`<arcgis-layout-column class=${i(this._getChildClasses(r).join(" "))} .currentNode=${this.currentNode} .debug=${o} .isEditMode=${this.isEditMode} .node=${r} .utils=${t} style=${c(r.styles)} .role=${r.columnProps?.role} .ariaLabel=${r.columnProps?.ariaLabel} ${g(r.properties ?? {})}></arcgis-layout-column>`);
+        return e(o.id, s`<arcgis-layout-column class=${i(this._getChildClasses(o).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${t} .isEditMode=${this.isEditMode} .node=${o} .utils=${r} style=${g(o.styles)} .role=${o.columnProps?.role} .ariaLabel=${o.columnProps?.ariaLabel} ${p(o.properties ?? {})}></arcgis-layout-column>`);
       } catch (u) {
-        return a.error(`Error rendering column with id ${r.id} in arcgis-hub-layout-row:`, u), o ? e(r.id, s`<arcgis-layout-column class=${i({ "layout-error": o })} .debug=${o} .node=${{ id: r.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`) : null;
+        return a.error(`Error rendering column with id ${o.id} in arcgis-hub-layout-row:`, u), t ? e(o.id, s`<arcgis-layout-column class=${i({ "layout-error": t })} .debug=${t} .node=${{ id: o.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`) : null;
       }
     }) ?? [];
   }
 }
-l("arcgis-layout-row", $);
+l("arcgis-layout-row", y);
 export {
-  $ as ArcgisLayoutRow
+  y as ArcgisLayoutRow
 };

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

@@ -11,7 +11,7 @@ export declare class ArcgisLayoutSection extends LitElement {
      * tracked in order to show the node's configuration
      * controls and "active" state in the UI.
      */
-    currentNode?: ILayoutNode;
+    highlightedNode?: ILayoutNode;
     /**
      * Utility functions passed down to all child layout
      * components. For now, this is specifically needed to

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

@@ -1,45 +1,45 @@
-import { c as d } from "../../chunks/runtime.js";
+import { c as g } from "../../chunks/runtime.js";
 import { html as e } from "lit-html";
 import { keyed as i } from "lit-html/directives/keyed.js";
-import { LitElement as l, noShadowRoot as g, safeClassMap as a, safeStyleMap as p } from "@arcgis/lumina";
-import { i as c } from "../../chunks/typeGuards.js";
+import { LitElement as u, noShadowRoot as l, safeClassMap as a, safeStyleMap as h } from "@arcgis/lumina";
+import { i as p } from "../../chunks/typeGuards.js";
 import { g as m } from "../../chunks/getResponsiveClasses.js";
-import { Logger as n } from "@esri/hub-common";
-import { spreadProps as w } from "@open-wc/lit-helpers";
+import { Logger as d } from "@esri/hub-common";
+import { spreadProps as c } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-class y extends l {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+class w extends u {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, currentNode: 0, utils: 0, debug: 5, isEditMode: 5 };
+    this.properties = { node: 0, highlightedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = g;
+    this.shadowRootOptions = l;
   }
-  _getChildClasses(o) {
-    const t = m(o);
-    return o.id === this.currentNode?.id && t.push("current-node"), t;
+  _getChildClasses(r) {
+    const t = m(r);
+    return r.id === this.highlightedNode?.id && t.push("current-node"), t;
   }
   render() {
-    const { debug: o, utils: t } = this;
-    return (this.node.children ?? []).map((r) => {
-      const { id: s } = r;
-      if (!c(r)) {
-        n.warn(`Child with id ${s} in arcgis-layout-section is not a row.`);
+    const { debug: r, utils: t } = this;
+    return (this.node.children ?? []).map((o) => {
+      const { id: s } = o;
+      if (!p(o)) {
+        d.warn(`Child with id ${s} in arcgis-layout-section is not a row.`);
         return;
       }
       try {
-        return i(r.id, e`<arcgis-layout-row class=${a(this._getChildClasses(r).join(" "))} .currentNode=${this.currentNode} .debug=${o} .isEditMode=${this.isEditMode} .node=${r} .utils=${t} style=${p(r.styles)} .role=${r.rowProps?.role} .ariaLabel=${r.rowProps?.ariaLabel} ${w(r.properties ?? {})}></arcgis-layout-row>`);
-      } catch (u) {
-        return n.error(`Error rendering row with id ${s} in arcgis-hub-layout-row:`, u), i(r.id, e`<arcgis-layout-row class=${a({ "layout-error": o })} .debug=${o} .node=${{ id: r.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
+        return i(o.id, e`<arcgis-layout-row class=${a(this._getChildClasses(o).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${r} .isEditMode=${this.isEditMode} .node=${o} .utils=${t} style=${h(o.styles)} .role=${o.rowProps?.role} .ariaLabel=${o.rowProps?.ariaLabel} ${c(o.properties ?? {})}></arcgis-layout-row>`);
+      } catch (n) {
+        return d.error(`Error rendering row with id ${s} in arcgis-hub-layout-row:`, n), i(o.id, e`<arcgis-layout-row class=${a({ "layout-error": r })} .debug=${r} .node=${{ id: o.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
       }
     });
   }
 }
-d("arcgis-layout-section", y);
+g("arcgis-layout-section", w);
 export {
-  y as ArcgisLayoutSection
+  w as ArcgisLayoutSection
 };

package/dist/components/arcgis-nav-card/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ISection, ITranslationMap } from '@esri/hub-common';
+import { IConfigurableLayoutNode, ILayoutNode, ILayoutNodeConfig, ISection, ITranslationMap, LayoutUtils } from '@esri/hub-common';
 
 /**
  * The nav card is intended to render various
@@ -13,6 +13,8 @@ import { ISection, ITranslationMap } from '@esri/hub-common';
  * enabling deep linking).
  */
 export declare class ArcgisNavCard extends LitElement {
+    readonly layoutNodeConfig: ILayoutNodeConfig;
+    node: ILayoutNode;
     /** The sections to render within the nav card */
     sections: ISection[];
     /**
@@ -26,4 +28,20 @@ export declare class ArcgisNavCard extends LitElement {
      * @default false
      */
     isEditMode: boolean;
+    highlightedNode?: ILayoutNode;
+    /**
+     * Utility functions passed down to all child layout
+     * components. For now, this is specifically needed to
+     * process a remote layout that is referenced by a
+     * layout node.
+     */
+    utils?: LayoutUtils;
+    /**
+     * Enables debug mode
+     *
+     * @default false
+     */
+    debug: boolean;
+    highlightHandler?: (event: MouseEvent) => void;
+    unHighlightHandler?: (event: MouseEvent) => void;
 }