@esri/hub-web-components 0.26.1 → 0.26.2

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

@@ -1,8 +1,8 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { HTMLConfigurableLayoutNodeElement, ILayout, ILayoutNodeChangeEventDetail, LayoutNode, ILayoutNodeRepositionEventDetail } from '@esri/hub-common';
+import { HTMLConfigurableLayoutNodeElement, ILayout, ILayoutNodeChangeEventDetail, ILayoutNodeConfig, LayoutNode, ILayoutNodeRepositionEventDetail } from '@esri/hub-common';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
-import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
+import { ILayoutNodeActivateEventDetail, ILayoutNodeEditEventDetail } from '../layouts/utils/layout-event-types';
 
 /** @private */
 export declare class ArcgisLayoutNodeControls extends LitElement {
@@ -26,20 +26,24 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
     isLayoutValid: boolean;
     /** The node being configured */
     node?: LayoutNode;
+    /** The layout node that is currently activated for editing */
+    activatedNode?: LayoutNode;
     /** Reference element for popover positioning */
-    referenceElement?: HTMLConfigurableLayoutNodeElement;
+    layoutElement?: HTMLConfigurableLayoutNodeElement;
     /** The t9n strings used in the layout node controls */
     messages: ArcgisLayoutContainer["_messages"];
-    /**
-     * Reference to the layout node editor. Used
-     * to set the focus trap options of the node
-     * controls popover.
-     */
-    layoutNodeEditorRef?: ArcgisLayoutNodeEditor;
-    /** Event emitted for telemetry */
-    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
+    /** The layout node configuration for the node being configured. */
+    layoutNodeConfig?: ILayoutNodeConfig;
+    /** Event emitted when a node is de-activated for editing */
+    readonly arcgisLayoutDeactivateNode: TargetedEvent<this, ILayoutNodeActivateEventDetail>;
+    /** Event emitted when the node is deleted */
+    readonly arcgisLayoutDeleteNode: TargetedEvent<this, {
+        id: string;
+    }>;
     /** Event emitted when node editor is opened */
-    readonly arcgisLayoutNodeEditorOpen: TargetedEvent<this, void>;
+    readonly arcgisLayoutNodeEditorOpen: TargetedEvent<this, ILayoutNodeEditEventDetail>;
+    /** Event emitted when the node is repositioned */
+    readonly arcgisLayoutNodeReposition: TargetedEvent<this, ILayoutNodeRepositionEventDetail>;
     /**
      * Event emitted when the node's visibility settings change.
      *
@@ -49,10 +53,6 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
      * editor (as opposed to simple toggle).
      */
     readonly arcgisLayoutNodeVisibilityChange: TargetedEvent<this, ILayoutNodeChangeEventDetail>;
-    /** Event emitted when the node is repositioned */
-    readonly arcgisLayoutNodeReposition: TargetedEvent<this, ILayoutNodeRepositionEventDetail>;
-    /** Event emitted when the node is deleted */
-    readonly arcgisLayoutDeleteNode: TargetedEvent<this, {
-        id: string;
-    }>;
+    /** Event emitted for telemetry */
+    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
 }

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

@@ -1,78 +1,80 @@
-import { c as d } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
-import { LitElement as c, useContextConsumer as u, createEvent as s } from "@arcgis/lumina";
-import { css as h } from "@lit/reactive-element/css-tag.js";
-import { cloneObject as p, getWithDefault as i, getProp as t } from "@esri/hub-common";
-import { g, i as f } from "../../chunks/interpolate-translations.js";
-import { i as m } from "../../chunks/isNodeVisible.js";
-import { dictionary as n } from "@esri/telemetry-dictionary-hub";
-import { f as r } from "../../chunks/findColumnAndNodeIndex.js";
-import { l as y } from "../../chunks/layoutContext.js";
+import { c as u } from "../../chunks/runtime.js";
+import { html as r } from "lit-html";
+import { LitElement as h, useContextConsumer as p, createEvent as s } from "@arcgis/lumina";
+import { css as g } from "@lit/reactive-element/css-tag.js";
+import { getWithDefault as i, getProp as o } from "@esri/hub-common";
+import { i as y } from "../../chunks/isNodeVisible.js";
+import { dictionary as l } from "@esri/telemetry-dictionary-hub";
+import { f as c } from "../../chunks/findColumnAndNodeIndex.js";
+import { l as m } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-const b = h`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
-class C extends c {
+v0.26.2 */
+const f = g`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
+class b extends h {
   constructor() {
-    super(...arguments), this.#e = u({ context: y, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.hubTelemetry = s(), this.arcgisLayoutNodeEditorOpen = s(), this.arcgisLayoutNodeVisibilityChange = s(), this.arcgisLayoutNodeReposition = s(), this.arcgisLayoutDeleteNode = s();
+    super(), this.#e = p({ context: m, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.arcgisLayoutDeactivateNode = s(), this.arcgisLayoutDeleteNode = s(), this.arcgisLayoutNodeEditorOpen = s(), this.arcgisLayoutNodeReposition = s(), this.arcgisLayoutNodeVisibilityChange = s(), this.hubTelemetry = s(), this.listen("calcitePopoverOpen", (e) => {
+      e.stopPropagation();
+    }), this.listen("calcitePopoverClose", (e) => {
+      e.stopPropagation(), this.arcgisLayoutDeactivateNode.emit({
+        node: this.node
+      });
+    });
   }
   static {
-    this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
+    this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, activatedNode: 0, layoutElement: 0, messages: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = b;
-  }
-  get _layoutNodeConfig() {
-    if (!this.referenceElement || !this.node)
-      return;
-    let e = g(this.referenceElement, this.node);
-    return e && (e = f(this.messages, e)), p(e);
+    this.styles = f;
   }
   #e;
+  get #t() {
+    const e = this.layoutNodeConfig ? this.layoutNodeConfig.disableMove : !1;
+    let t = !1;
+    return this.node && this.layout && (t = !!c(this.node, this.layout)?.isFirstInColumn), !e && !t;
+  }
+  get #o() {
+    const e = this.layoutNodeConfig ? this.layoutNodeConfig.disableMove : !1;
+    let t = !1;
+    return this.node && this.layout && (t = !!c(this.node, this.layout)?.isLastInColumn), !e && !t;
+  }
+  get _isNodeVisible() {
+    return y(this.node);
+  }
+  get layoutNodeEditorRef() {
+    return this.#e.value.layoutNodeEditorRef;
+  }
   get layout() {
     return this.#e.value.layout;
   }
-  get #t() {
-    const e = this._layoutNodeConfig ? this._layoutNodeConfig.disableMove : !1;
-    let o = !1;
-    return this.node && this.layout && (o = !!r(this.node, this.layout)?.isFirstInColumn), !e && !o;
-  }
   get moveUpTooltipText() {
     let e = "";
     return this.#t || (e = this.messages.layoutNodeControls.repositionUpDisabledTooltip), e;
   }
-  get #o() {
-    const e = this._layoutNodeConfig ? this._layoutNodeConfig.disableMove : !1;
-    let o = !1;
-    return this.node && this.layout && (o = !!r(this.node, this.layout)?.isLastInColumn), !e && !o;
-  }
   get moveDownTooltipText() {
     let e = "";
     return this.#o || (e = this.messages.layoutNodeControls.repositionDownDisabledTooltip), e;
   }
   get deleteTooltipText() {
     let e = "";
-    return this._layoutNodeConfig?.disableDelete ? e = this.messages.layoutNodeControls.deletePremiumOnlyTooltip : this.node?.readOnly && (e = this.messages.layoutNodeControls.readOnlyTooltip), e;
-  }
-  get _isNodeVisible() {
-    return m(this.node);
+    return this.layoutNodeConfig?.disableDelete ? e = this.messages.layoutNodeControls.deletePremiumOnlyTooltip : this.node?.readOnly && (e = this.messages.layoutNodeControls.readOnlyTooltip), e;
   }
   _onOpenEditorButtonClick() {
-    this.arcgisLayoutNodeEditorOpen.emit(), this.hubTelemetry.emit({
-      ...n.category.interaction.action.open.label.sidePanel,
-      details: this._layoutNodeConfig.name
+    this.arcgisLayoutNodeEditorOpen.emit({ node: this.node, element: this.layoutElement }), this.hubTelemetry.emit({
+      ...l.category.interaction.action.open.label.sidePanel,
+      details: this.layoutNodeConfig.name
     });
   }
   _onToggleVisibilityClick() {
     this.arcgisLayoutNodeVisibilityChange.emit({
       id: this.node.id,
       valid: !0,
-      layoutNodeConfig: this._layoutNodeConfig
+      layoutNodeConfig: this.layoutNodeConfig
     });
     const e = this._isNodeVisible ? "disable" : "enable";
     this.hubTelemetry.emit({
-      ...n.category.interaction.action[e].label.visibility,
-      details: this._layoutNodeConfig.name
+      ...l.category.interaction.action[e].label.visibility,
+      details: this.layoutNodeConfig.name
     });
   }
   _onMoveUpButtonClick() {
@@ -83,32 +85,38 @@ class C extends c {
   }
   _onDeleteButtonClick() {
     this.hubTelemetry.emit({
-      ...n.category.interaction.action.open.label.popover,
-      details: `Delete ${this._layoutNodeConfig.name}`
+      ...l.category.interaction.action.open.label.popover,
+      details: `Delete ${this.layoutNodeConfig.name}`
     });
   }
   _onDeleteConfirmButtonClick() {
     this.arcgisLayoutDeleteNode.emit({
       id: this.node.id
     }), this.hubTelemetry.emit({
-      ...n.category.content.action.delete.label.layoutNode,
-      details: this._layoutNodeConfig.name
+      ...l.category.content.action.delete.label.layoutNode,
+      details: this.layoutNodeConfig.name
     });
   }
   renderControls() {
-    const e = this._layoutNodeConfig;
-    if (!e || !this.referenceElement)
-      return null;
-    const o = this.messages.layoutNodeControls.a11yLabel || "", l = this.layoutNodeEditorRef ? {
-      extraContainers: [this.layoutNodeEditorRef]
-    } : void 0;
-    return a`<calcite-popover auto-close .focusTrapOptions=${l} offset-distance=0 .label=${o} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${this.referenceElement}><calcite-action-bar expand-disabled layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${i(e, "i18n.label", this.messages.layoutNodeControls.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${e.disableAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? i(e, "i18n.hideLabel", t(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : i(e, "i18n.showLabel", t(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${i(e, "i18n.repositionUpLabel", t(this.messages, "layoutNodeControls.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=${i(e, "i18n.repositionDownLabel", t(this.messages, "layoutNodeControls.configurableNodes.default.down"))}></calcite-action></arcgis-ref-tooltip>${e.editor && a`<arcgis-ref-tooltip .text=${this.node?.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node?.readOnly || e.disableEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${i(e, "i18n.edit", t(this.messages, "layoutNodeControls.configurableNodes.default.edit"))}></calcite-action></arcgis-ref-tooltip>` || ""}<arcgis-ref-tooltip .text=${this.deleteTooltipText}><calcite-action .disabled=${this.node?.readOnly || e.disableDelete} icon=trash id=delete-button @click=${this._onDeleteButtonClick} .text=${i(e, "i18n.delete", t(this.messages, "layoutNodeControls.configurableNodes.default.delete"))}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${l} .heading=${t(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${t(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>${t(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${t(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
+    let e;
+    const t = this.layoutNodeConfig;
+    if (this.isEditMode && this.node && t && this.layoutElement) {
+      const a = this.messages.layoutNodeControls.a11yLabel || "";
+      let n = "overlay";
+      this.node.tag === "arcgis-nav-card" && (n = this.layoutElement.querySelector("calcite-tab-nav"));
+      const d = this.layoutNodeEditorRef ? {
+        initialFocus: this.layoutNodeEditorRef,
+        extraContainers: [this.layoutNodeEditorRef]
+      } : void 0;
+      e = r`<calcite-popover auto-close .focusTrapOptions=${d} offset-distance=0 .label=${a} .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=${i(t, "i18n.label", this.messages.layoutNodeControls.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 ? i(t, "i18n.hideLabel", o(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : i(t, "i18n.showLabel", o(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${i(t, "i18n.repositionUpLabel", o(this.messages, "layoutNodeControls.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=${i(t, "i18n.repositionDownLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.down"))}></calcite-action></arcgis-ref-tooltip>${t.editor && r`<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=${i(t, "i18n.edit", o(this.messages, "layoutNodeControls.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=${i(t, "i18n.delete", o(this.messages, "layoutNodeControls.configurableNodes.default.delete"))}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${d} .heading=${o(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${o(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>${o(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${o(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
+    }
+    return e;
   }
   render() {
-    return this.isEditMode && this.node && this.referenceElement && this.renderControls() || "";
+    return this.renderControls();
   }
 }
-d("arcgis-layout-node-controls", C);
+u("arcgis-layout-node-controls", b);
 export {
-  C as ArcgisLayoutNodeControls
+  b as ArcgisLayoutNodeControls
 };

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

@@ -1,14 +1,14 @@
 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 { getProp as e, mergeObjects as h, getWithDefault as s } from "@esri/hub-common";
+import { getProp as s, mergeObjects as h, getWithDefault as a } from "@esri/hub-common";
 import { createRef as g, ref as f } from "lit/directives/ref.js";
-import { html as a } from "lit";
+import { html as r } from "lit";
 import { css as C } from "@lit/reactive-element/css-tag.js";
 import { ArcgisLayoutNodeEditorDynamicTag as m } from "./layout-node-editor-dynamic-tag/customElement.js";
 import { l as p } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
+v0.26.2 */
 const v = C`@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 u {
   constructor() {
@@ -37,35 +37,35 @@ class y extends u {
     (o.has("layoutNodeConfig") || o.has("node")) && this.setFocus();
   }
   t() {
-    return (o) => e(this._messages, o) || o;
+    return (o) => s(this._messages, o) || o;
   }
   init() {
     if (!this.node || !this.layoutNodeConfig)
       return;
-    const o = e(this.layoutNodeConfig, "editor.valuesInCallback") || ((t) => t);
+    const o = s(this.layoutNodeConfig, "editor.valuesInCallback") || ((t) => t);
     this._values = o(this.node.properties);
   }
   _handleConfigurationEditorChange(o) {
     o.stopPropagation();
-    const { values: t = {}, valid: r } = o.detail, i = h(t, this._values);
-    this._values = i, this.arcgisLayoutNodeChange.emit({
+    const { values: t = {}, valid: i } = o.detail, e = h(t, this._values);
+    this._values = e, this.arcgisLayoutNodeChange.emit({
       layoutNodeConfig: this.layoutNodeConfig,
-      values: i,
-      valid: r,
+      values: e,
+      valid: i,
       id: this.node.id
     });
   }
   renderEditor() {
-    const o = s(this.layoutNodeConfig || {}, "editor.inputChangeEvent", "arcgisHubGalleryCardEditorChange"), t = s(this.layoutNodeConfig || {}, "editor.valuesProp", "values");
+    const o = a(this.layoutNodeConfig || {}, "editor.inputChangeEvent", "arcgisHubGalleryCardEditorChange"), t = a(this.layoutNodeConfig || {}, "editor.valuesProp", "values");
     return this.layoutNodeConfig?.editor?.tag ? m({ 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} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${f(this._configEditorRef)}></arcgis-configuration-editor>`;
+    } }) : r`<arcgis-configuration-editor @keydown=${(i) => i.stopPropagation()} @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${f(this._configEditorRef)}></arcgis-configuration-editor>`;
   }
   render() {
-    return !this.node || !this.layoutNodeConfig ? a`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
+    return !this.node || !this.layoutNodeConfig ? r`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
   }
 }
 n("arcgis-layout-node-editor", y);

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

@@ -2,7 +2,7 @@ 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.26/esri/copyright.txt for details.
-v0.26.1 */
+v0.26.2 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

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

@@ -0,0 +1,23 @@
+/// <reference types="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { HTMLConfigurableLayoutNodeElement, LayoutNode } from '@esri/hub-common';
+import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
+import { IAddLayoutNodeConfiguration } from '../layouts/utils/getAddableLayoutNodes';
+import { ILayoutNodeActivateEventDetail, ILayoutNodeAddEventDetail } from '../layouts/utils/layout-event-types';
+
+/** @private */
+export declare class ArcgisLayoutNodeWrapper extends LitElement {
+    /** The node being configured */
+    node?: LayoutNode;
+    /**
+     * The layout node that is currently activated for editing. This is
+     * tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
+     */
+    activatedNode?: LayoutNode;
+    /** @default false */
+    isEditMode: boolean;
+    readonly arcgisLayoutActivateNode: TargetedEvent<this, ILayoutNodeActivateEventDetail>;
+    readonly arcgisLayoutAddNode: TargetedEvent<this, ILayoutNodeAddEventDetail>;
+    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
+}

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

@@ -0,0 +1,211 @@
+import { g as m, c as f } from "../../chunks/runtime.js";
+import { html as o } from "lit-html";
+import { LitElement as y, useContextConsumer as b, createEvent as c, safeClassMap as n, nothing as d } from "@arcgis/lumina";
+import { css as v } from "@lit/reactive-element/css-tag.js";
+import { checkPermission as N, getProp as l, cloneObject as $, getWithDefault as w } from "@esri/hub-common";
+import { l as x } from "../../chunks/layoutContext.js";
+import { g as C, i as _ } from "../../chunks/interpolate-translations.js";
+import { m as E, i as P } from "../../chunks/memoizeAsync.js";
+import { dictionary as h } from "@esri/telemetry-dictionary-hub";
+import { g as L } from "../../chunks/state.js";
+import { slotChangeGetAssignedElements as A } from "@arcgis/toolkit/dom";
+import { i as O } from "../../chunks/isNodeVisible.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.2 */
+const k = v`calcite-label{position:fixed;position-anchor:--highlight-anchor;bottom:calc(anchor(top) + 4px);top:calc(anchor(top) - 30px);background-color:#fff;padding:.25rem .5rem;--tw-shadow: var(--calcite-shadow-md);--tw-shadow-colored: var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#overlay{position:fixed;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-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){calcite-label{opacity:1}}:host([is-edit-mode]:hover):not(:has(arcgis-nav-card)),:host([is-edit-mode]:focus):not(:has(arcgis-nav-card)){--calcite-internal-color-focus: var(--calcite-ui-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:1px;calcite-label,calcite-button{opacity:1}}:host([is-edit-mode]):has(#overlay.activated){--calcite-internal-color-focus: var(--calcite-ui-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:2px;calcite-label,calcite-button{opacity:1}}.popover-content{max-height:19.3rem;overflow-y:auto}calcite-list-item{--calcite-list-border-color: transparent}`, s = h.category.interaction.action.select.label.layoutNode, M = [
+  {
+    tag: "arcgis-text-card",
+    label: "{{layoutNodeControls.configurableNodes.text.label:translate}}",
+    icon: "text",
+    defaults: {
+      html: "<p>{{layoutNodeControls.configurableNodes.text.default:translate}}</p>"
+    },
+    telemetry: {
+      ...s,
+      details: "Text card"
+    }
+  },
+  {
+    tag: "arcgis-hub-image",
+    label: "{{layoutNodeControls.configurableNodes.image.label:translate}}",
+    icon: "image",
+    defaults: {
+      src: "",
+      fallback: "{{assetPath}}images/image-card-placeholder.svg"
+    },
+    telemetry: {
+      ...s,
+      details: "Image card"
+    }
+  },
+  {
+    tag: "arcgis-hub-embed-card",
+    label: "{{layoutNodeControls.configurableNodes.embed.label:translate}}",
+    icon: "embedded-content",
+    telemetry: {
+      ...s,
+      details: "Embed card"
+    }
+  },
+  {
+    tag: "arcgis-hub-gallery-card",
+    label: "{{layoutNodeControls.configurableNodes.gallery.label:translate}}",
+    icon: "gallery",
+    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}}"] }]
+            }
+          ]
+        }
+      }
+    },
+    telemetry: {
+      ...s,
+      details: "Gallery card"
+    }
+  }
+  // {
+  //   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 F(u, e, t) {
+  let i = M.filter((r) => !r.permissions || r.permissions.length === 0 ? !0 : r.permissions.every((p) => N(p, t).access));
+  const a = {
+    context: t,
+    entity: e.entity ?? {},
+    assetPath: l(e, "assetPath")
+  }, g = {
+    messages: l(e, "translations"),
+    assetPath: l(e, "assetPath")
+  };
+  return i = P(i, a, g), await Promise.resolve(i);
+}
+const S = E(F);
+class T extends y {
+  constructor() {
+    super(), this.#e = b({ context: x }), this.isPopoverOpen = !1, this.isFocused = !1, this.isEditMode = !1, this.arcgisLayoutActivateNode = c(), this.arcgisLayoutAddNode = c(), this.hubTelemetry = c(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
+      this.isPopoverOpen = !0;
+    }), this.listen("calcitePopoverClose", (e) => {
+      this.isPopoverOpen = !1;
+    }), this.listen("arcgisLayoutNodeFocus", this._handleNodeFocus);
+  }
+  static {
+    this.properties = { layoutElement: 16, config: 16, isPopoverOpen: 16, isFocused: 16, node: 0, activatedNode: 0, isEditMode: 7 };
+  }
+  static {
+    this.styles = k;
+  }
+  #e;
+  get _messages() {
+    return this.#e.value.messages;
+  }
+  get _layoutNodeConfig() {
+    if (!this.layoutElement || !this.node)
+      return;
+    let e = C(this.layoutElement, this.node);
+    return e && (e = _(this._messages, e)), $(e);
+  }
+  get isNodeVisible() {
+    let e = !0;
+    return this.isEditMode && !O(this.node) && (e = !1), e;
+  }
+  get _context() {
+    return L();
+  }
+  _handleSlotChange(e) {
+    this.layoutElement = A(e)[0];
+  }
+  _handlePopoverOpen() {
+    this.hubTelemetry.emit(h.category.interaction.action.open.label.dialog.details.addLayoutNode);
+  }
+  async loadConfig() {
+    const e = m("assets/layout-container/");
+    this.config || (this.config = await S({}, { translations: this._messages, assetPath: e }, this._context));
+  }
+  _handleNodeFocus(e) {
+    this.isFocused = e.detail;
+  }
+  _handleNodeClick(e) {
+    e.stopPropagation(), e.preventDefault(), this.node && this.arcgisLayoutActivateNode.emit({
+      node: this.node
+    });
+  }
+  _handleNodeKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && this._handleNodeClick(e);
+  }
+  async _handleListItemSelect(e) {
+    const t = e.target.dataset.tag, i = this.config?.find((a) => a.tag === t);
+    if (this.node && i) {
+      const a = {
+        adjacentNode: this.node,
+        position: "after",
+        config: i
+      };
+      this.arcgisLayoutAddNode.emit(a);
+    }
+    this.isPopoverOpen = !1;
+  }
+  renderLabel() {
+    let e;
+    if (this.isEditMode && this.node) {
+      const t = w(this._layoutNodeConfig ?? {}, "i18n.label", l(this._messages, "layoutNodeControls.configurableNodes.default.label"));
+      e = o`<calcite-label scale=l>${t}</calcite-label>`;
+    }
+    return e;
+  }
+  renderOverlay() {
+    let e;
+    if (this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card") {
+      const t = this._messages.layoutNodeHidden;
+      e = o`<div id=overlay class=${n({ hidden: !this.isNodeVisible, activated: this.node.id === this.activatedNode?.id })} @click=${this._handleNodeClick} @keydown=${this._handleNodeKeyDown} tabindex=0>${this.isNodeVisible ? null : o`<calcite-chip appearance=solid icon=view-hide .label=${t}>${t}</calcite-chip>`}</div>`;
+    }
+    return e;
+  }
+  renderNodeControls() {
+    let e;
+    return this.isEditMode && this.node && (e = o`<arcgis-layout-node-controls .activatedNode=${this.activatedNode} .isEditMode=${this.isEditMode} .isLayoutValid=${this.#e.value.isLayoutValid} .layout=${this.#e.value.layout} .layoutNodeConfig=${this._layoutNodeConfig} .messages=${this._messages} .node=${this.node} .layoutElement=${this.layoutElement} style="position: absolute;"></arcgis-layout-node-controls>`), e;
+  }
+  renderAddButton() {
+    let e;
+    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = o`<calcite-button icon-start=plus id=add-button .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
+  }
+  renderAddPopover() {
+    let e;
+    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = o`<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) => o`<calcite-list-item data-tag=${t.tag ?? d} .disabled=${t.disabled} icon-start=${t.icon ?? d} .label=${t.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
+  }
+  render() {
+    return o`${this.renderLabel()}<div class=${n({
+      "slot-container": !0,
+      "is-focused": this.isFocused
+    })}><slot @slotchange=${this._handleSlotChange}></slot></div>${this.renderOverlay()}${this.renderAddButton()}${this.renderAddPopover()}${this.renderNodeControls()}`;
+  }
+}
+f("arcgis-layout-node-wrapper", T);
+export {
+  T as ArcgisLayoutNodeWrapper
+};

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

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-chip";
+import "../arcgis-layout-node-controls/index.js";
+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-wrapper/index.js

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-chip";
+import "../arcgis-layout-node-controls/index.js";
+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-row/customElement.d.ts

@@ -7,10 +7,11 @@ export declare class ArcgisLayoutRow extends LitElement {
     /** The row node to render. */
     node: IRow;
     /**
-     * The currently focused/hovered node. Used to show
-     * configuration controls and active state in the UI.
+     * The layout node that is currently activated for editing.
+     * This is tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
      */
-    highlightedNode?: ILayoutNode;
+    activatedNode?: ILayoutNode;
     /**
      * Utility functions passed down to all child layout
      * components. Used for processing remote layouts