@esri/hub-web-components 0.26.1 → 0.27.0

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

@@ -1,71 +1,71 @@
-import { c as A } from "../../chunks/runtime.js";
-import { html as p } from "lit-html";
-import { keyed as $ } from "lit-html/directives/keyed.js";
-import { LitElement as R, useContextProvider as I, createEvent as E, noShadowRoot as T } from "@arcgis/lumina";
-import { createRef as L, ref as v } from "lit/directives/ref.js";
-import { l as M } from "../../chunks/layoutContext.js";
-import { css as D } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as x, cloneObject as f, setProp as H, getProp as S, deepMerge as O, Logger as y, createId as V, getWithDefault as U } from "@esri/hub-common";
-import { g as j } from "../../chunks/state.js";
-import { f as m, p as B } from "../../chunks/processLayout.js";
-import { c as z, b as w, i as N, a as C } from "../../chunks/typeGuards.js";
-import { g as F, i as G } from "../../chunks/interpolate-translations.js";
-import { u as q } from "../../chunks/useT9n.js";
-import { migrateSchema as X } from "@esri/hub-components";
-import { f as P } from "../../chunks/findColumnAndNodeIndex.js";
-import { dictionary as Y } from "@esri/telemetry-dictionary-hub";
+import { c as P } from "../../chunks/runtime.js";
+import { html as _ } from "lit-html";
+import { keyed as w } from "lit-html/directives/keyed.js";
+import { LitElement as R, useContextProvider as D, createEvent as L, noShadowRoot as I } from "@arcgis/lumina";
+import { createRef as C, ref as $ } from "lit/directives/ref.js";
+import { l as T } from "../../chunks/layoutContext.js";
+import { css as M } from "@lit/reactive-element/css-tag.js";
+import { layoutNodeTags as x, cloneObject as f, setProp as V, getProp as S, deepMerge as O, Logger as p, createId as H, getWithDefault as j } from "@esri/hub-common";
+import { g as U } from "../../chunks/state.js";
+import { f as m, p as z } from "../../chunks/processLayout.js";
+import { c as B, b, i as v, a as E } from "../../chunks/typeGuards.js";
+import { g as F, i as q } from "../../chunks/interpolate-translations.js";
+import { u as G } from "../../chunks/useT9n.js";
+import { migrateSchema as W } from "@esri/hub-components";
+import { f as A } from "../../chunks/findColumnAndNodeIndex.js";
+import { dictionary as J } from "@esri/telemetry-dictionary-hub";
 /*! 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 W = D`@layer{arcgis-layout-container{display:block;--offsetTop: 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(--offsetTop));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
-function J(i, t) {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+const K = M`@layer{arcgis-layout-container{display:block;--offsetTop: 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(--offsetTop));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
+function Q(i, t) {
   const s = ["order", "offset", "width"], e = [];
-  return s.forEach((o) => {
-    let a;
-    w(i) && (a = i.sectionProps?.[o]), N(i) && (a = i.rowProps?.[o]), C(i) && (a = i.columnProps?.[o]), typeof a == "number" ? (a < 0 || a > 12) && e.push(`Node "${i.id}": ${t} > ${o} out of range (0-12): ${a}`) : typeof a == "object" && Object.entries(a).forEach(([n, h]) => {
-      typeof h == "number" && (h < 0 || h > 12) && e.push(`Node "${i.id}": ${t} > ${o}.${n} out of range (0-12): ${h}`);
+  return s.forEach((a) => {
+    let o;
+    b(i) && (o = i.sectionProps?.[a]), v(i) && (o = i.rowProps?.[a]), E(i) && (o = i.columnProps?.[a]), typeof o == "number" ? (o < 0 || o > 12) && e.push(`Node "${i.id}": ${t} > ${a} out of range (0-12): ${o}`) : typeof o == "object" && Object.entries(o).forEach(([n, r]) => {
+      typeof r == "number" && (r < 0 || r > 12) && e.push(`Node "${i.id}": ${t} > ${a}.${n} out of range (0-12): ${r}`);
     });
   }), e;
 }
-function K(i, t, s, e) {
-  const o = [];
-  return i.id || o.push(`${t} > missing required id.`), i.tag || o.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && o.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), e.includes(i.tag) || o.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), o.push(...J(i, t)), (w(i) || N(i) || C(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && o.push(`Node "${i.id}": ${t} > missing or empty children array.`), o;
+function X(i, t, s, e) {
+  const a = [];
+  return i.id || a.push(`${t} > missing required id.`), i.tag || a.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && a.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), e.includes(i.tag) || a.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), a.push(...Q(i, t)), (b(i) || v(i) || E(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && a.push(`Node "${i.id}": ${t} > missing or empty children array.`), a;
 }
-function b({ node: i, nodePath: t, idSet: s, validTags: e, errors: o }) {
+function N({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
   if (i.tag === "arcgis-nav-card") {
-    const a = i.properties;
-    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((h, l) => {
+    const o = i.properties;
+    o && typeof o == "object" && Array.isArray(o.sections) && o.sections.forEach((r, l) => {
       const u = `${t}.sections[${l}]`;
-      b({
-        node: h,
+      N({
+        node: r,
         nodePath: u,
         idSet: s,
         validTags: ["arcgis-layout-section"],
-        errors: o
+        errors: a
       });
     });
   }
-  o.push(...K(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((a, n) => {
-    let h = `${t}.Child[${n}]`, l = Array.from(x);
-    w(i) ? (l = ["arcgis-layout-row"], h = `${t}.Row[${n}]`) : N(i) ? (l = ["arcgis-layout-column"], h = `${t}.Column[${n}]`) : C(i) && (l = Array.from(x).filter(
+  a.push(...X(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((o, n) => {
+    let r = `${t}.Child[${n}]`, l = Array.from(x);
+    b(i) ? (l = ["arcgis-layout-row"], r = `${t}.Row[${n}]`) : v(i) ? (l = ["arcgis-layout-column"], r = `${t}.Column[${n}]`) : E(i) && (l = Array.from(x).filter(
       (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
-    )), b({
-      node: a,
-      nodePath: h,
+    )), N({
+      node: o,
+      nodePath: r,
       idSet: s,
       validTags: l,
-      errors: o
+      errors: a
     });
   });
 }
-function Q(i) {
+function Y(i) {
   const t = [], s = /* @__PURE__ */ new Set();
-  return i ? typeof i != "object" ? (t.push("Layout must be an object."), t) : !i.sections.length || !Array.isArray(i.sections) ? (t.push("Layout must have a sections array."), t) : (i.sections.forEach((e, o) => {
-    if (z(e))
+  return i ? typeof i != "object" ? (t.push("Layout must be an object."), t) : !i.sections.length || !Array.isArray(i.sections) ? (t.push("Layout must have a sections array."), t) : (i.sections.forEach((e, a) => {
+    if (B(e))
       return;
-    const a = e, n = `Section[${o}]`;
-    b({
-      node: a,
+    const o = e, n = `Section[${a}]`;
+    N({
+      node: o,
       nodePath: n,
       idSet: s,
       validTags: ["arcgis-layout-section"],
@@ -90,7 +90,7 @@ const it = {
   2: tt
 };
 async function et(i) {
-  const t = X(i, it), s = await Promise.all(
+  const t = W(i, it), s = await Promise.all(
     t.sections.map(async (e) => await k(e))
   );
   return t.sections = s, t;
@@ -117,48 +117,48 @@ function nt(i, t) {
   if (t > 0)
     return i.sections[t - 1];
 }
-function ht(i, t) {
+function rt(i, t) {
   const s = f(t);
-  function e(o) {
-    for (let a = 0; a < o.sections.length; a++) {
-      const n = o.sections[a];
+  function e(a) {
+    for (let o = 0; o < a.sections.length; o++) {
+      const n = a.sections[o];
       if (n.children)
-        for (let h = 0; h < n.children.length; h++) {
-          const l = n.children[h];
+        for (let r = 0; r < n.children.length; r++) {
+          const l = n.children[r];
           if (l.children)
             for (let u = 0; u < l.children.length; u++) {
-              const d = l.children[u];
-              if (d.children)
-                for (let c = 0; c < d.children.length; c++) {
-                  const g = d.children[c];
-                  if (g.id === i.id)
-                    if (c > 0) {
-                      const r = d.children[c - 1];
-                      return d.children[c - 1] = d.children[c], d.children[c] = r, !0;
+              const c = l.children[u];
+              if (c.children)
+                for (let h = 0; h < c.children.length; h++) {
+                  const y = c.children[h];
+                  if (y.id === i.id)
+                    if (h > 0) {
+                      const d = c.children[h - 1];
+                      return c.children[h - 1] = c.children[h], c.children[h] = d, !0;
                     } else {
                       if (u > 0)
-                        return d.children.splice(c, 1), l.children[u - 1].children?.push(i), !0;
-                      if (h > 0) {
-                        d.children.splice(c, 1);
-                        const r = ot(n, h);
-                        if (r?.children && r.children.length > 0)
-                          return r.children[r.children.length - 1].children?.push(i), !0;
-                      } else if (a > 0) {
-                        d.children.splice(c, 1);
-                        const r = nt(o, a);
-                        if (r?.children && r.children.length > 0) {
-                          const _ = r.children[r.children.length - 1];
-                          if (_.children && _.children.length > 0)
-                            return _.children[_.children.length - 1].children?.push(i), !0;
+                        return c.children.splice(h, 1), l.children[u - 1].children?.push(i), !0;
+                      if (r > 0) {
+                        c.children.splice(h, 1);
+                        const d = ot(n, r);
+                        if (d?.children && d.children.length > 0)
+                          return d.children[d.children.length - 1].children?.push(i), !0;
+                      } else if (o > 0) {
+                        c.children.splice(h, 1);
+                        const d = nt(a, o);
+                        if (d?.children && d.children.length > 0) {
+                          const g = d.children[d.children.length - 1];
+                          if (g.children && g.children.length > 0)
+                            return g.children[g.children.length - 1].children?.push(i), !0;
                         }
                       }
                     }
-                  if (g.tag === "arcgis-nav-card") {
-                    const r = g.properties?.sections;
-                    if (r && e({ sections: r }))
+                  if (y.tag === "arcgis-nav-card") {
+                    const d = y.properties?.sections;
+                    if (d && e({ sections: d }))
                       return !0;
                   }
-                  if (g.children && N(g) && e({ sections: [{ children: [g] }] }))
+                  if (y.children && v(y) && e({ sections: [{ children: [y] }] }))
                     return !0;
                 }
             }
@@ -168,48 +168,48 @@ function ht(i, t) {
   }
   return e(s), s;
 }
-function rt(i, t) {
+function dt(i, t) {
   const s = f(t);
-  function e(o) {
-    for (let a = 0; a < o.sections.length; a++) {
-      const n = o.sections[a];
+  function e(a) {
+    for (let o = 0; o < a.sections.length; o++) {
+      const n = a.sections[o];
       if (n.children)
-        for (let h = 0; h < n.children.length; h++) {
-          const l = n.children[h];
+        for (let r = 0; r < n.children.length; r++) {
+          const l = n.children[r];
           if (l.children)
             for (let u = 0; u < l.children.length; u++) {
-              const d = l.children[u];
-              if (d.children)
-                for (let c = 0; c < d.children.length; c++) {
-                  const g = d.children[c];
-                  if (g.id === i.id)
-                    if (c < d.children.length - 1) {
-                      const r = d.children[c + 1];
-                      return d.children[c + 1] = d.children[c], d.children[c] = r, !0;
+              const c = l.children[u];
+              if (c.children)
+                for (let h = 0; h < c.children.length; h++) {
+                  const y = c.children[h];
+                  if (y.id === i.id)
+                    if (h < c.children.length - 1) {
+                      const d = c.children[h + 1];
+                      return c.children[h + 1] = c.children[h], c.children[h] = d, !0;
                     } else {
                       if (u < l.children.length - 1)
-                        return d.children.splice(c, 1), l.children[u + 1].children?.unshift(i), !0;
-                      if (h < n.children.length - 1) {
-                        d.children.splice(c, 1);
-                        const r = st(n, h);
-                        if (r?.children && r.children.length > 0)
-                          return r.children[0].children?.unshift(i), !0;
-                      } else if (a < o.sections.length - 1) {
-                        d.children.splice(c, 1);
-                        const r = at(o, a);
-                        if (r?.children && r.children.length > 0) {
-                          const _ = r.children[0];
-                          if (_.children && _.children.length > 0)
-                            return _.children[0].children?.unshift(i), !0;
+                        return c.children.splice(h, 1), l.children[u + 1].children?.unshift(i), !0;
+                      if (r < n.children.length - 1) {
+                        c.children.splice(h, 1);
+                        const d = st(n, r);
+                        if (d?.children && d.children.length > 0)
+                          return d.children[0].children?.unshift(i), !0;
+                      } else if (o < a.sections.length - 1) {
+                        c.children.splice(h, 1);
+                        const d = at(a, o);
+                        if (d?.children && d.children.length > 0) {
+                          const g = d.children[0];
+                          if (g.children && g.children.length > 0)
+                            return g.children[0].children?.unshift(i), !0;
                         }
                       }
                     }
-                  if (g.tag === "arcgis-nav-card") {
-                    const r = g.properties?.sections;
-                    if (r && e({ sections: r }))
+                  if (y.tag === "arcgis-nav-card") {
+                    const d = y.properties?.sections;
+                    if (d && e({ sections: d }))
                       return !0;
                   }
-                  if (g.children && N(g) && e({ sections: [{ children: [g] }] }))
+                  if (y.children && v(y) && e({ sections: [{ children: [y] }] }))
                     return !0;
                 }
             }
@@ -221,23 +221,23 @@ function rt(i, t) {
 }
 function lt(i, t) {
   const s = [];
-  function e(o) {
-    if (o.nodeType === Node.ELEMENT_NODE) {
-      const a = o;
-      a.matches(t) && s.push(a);
-      const n = a.shadowRoot;
+  function e(a) {
+    if (a.nodeType === Node.ELEMENT_NODE) {
+      const o = a;
+      o.matches(t) && s.push(o);
+      const n = o.shadowRoot;
       n && e(n);
-      for (const h of Array.from(a.children))
-        e(h);
-    } else if (o instanceof ShadowRoot)
-      for (const a of Array.from(o.children))
-        e(a);
+      for (const r of Array.from(o.children))
+        e(r);
+    } else if (a instanceof ShadowRoot)
+      for (const o of Array.from(a.children))
+        e(o);
   }
   return e(i), s;
 }
-class dt extends R {
+class ct extends R {
   constructor() {
-    super(), this._messages = q({ blocking: !0 }), this.#i = I({ context: M }), this.#t = !1, this._isNodeDirty = !1, this._layoutRef = L(), this._nodeControlsRef = L(), this._layoutNodeEditorRef = L(), this._handleExitEditMode = async (t) => {
+    super(), this._messages = G({ blocking: !0 }), this.#t = D({ context: T }), this._isNodeDirty = !1, this._layoutRef = C(), this._layoutNodeEditorRef = C(), this._handleExitEditMode = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
     }, this._handlePublishLayout = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutPublished.emit({
@@ -253,40 +253,58 @@ class dt extends R {
         await this._updateLayoutNode(this._nodeBeforeEdit.id, "properties", this._nodeBeforeEdit.properties, void 0, !0);
       }
       this._isEditPanelOpen = !1, this._nodeBeforeEdit = void 0, this.hubTelemetry.emit({
-        ...Y.category.interaction.action.close.label.sidePanel,
+        ...J.category.interaction.action.close.label.sidePanel,
         details: this._layoutNodeEditorConfig?.layoutNodeConfig?.name || "unknown"
       });
-    }, this._liveAnnouncement = void 0, this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this._isLayoutDirty = !1, this._isLayoutValid = !0, this._isEditPanelOpen = !1, this.debug = !1, this.isEditMode = !1, this.isPublishing = !1, this.options = {}, this.arcgisHubLayoutChanged = E(), this.arcgisHubLayoutEditorExit = E(), this.arcgisHubLayoutPublished = E(), this.hubTelemetry = E(), this.listen("arcgisLayoutNodeChange", async (t) => {
+    }, this._setlayoutNodeEditorRef = async (t) => {
+      await this.updateComplete, await new Promise((s) => setTimeout(s, 100)), this.#t.setValue({
+        messages: this._messages,
+        layout: this._processedLayout,
+        layoutNodeEditorRef: t,
+        isLayoutValid: this._isLayoutValid
+      });
+    }, this._liveAnnouncement = void 0, this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this._isLayoutDirty = !1, this._isLayoutValid = !0, this._isEditPanelOpen = !1, this.debug = !1, this.isEditMode = !1, this.isPublishing = !1, this.options = {}, this.arcgisHubLayoutChanged = L(), this.arcgisHubLayoutEditorExit = L(), this.arcgisHubLayoutPublished = L(), this.hubTelemetry = L(), this.listen("arcgisLayoutActivateNode", (t) => {
+      this._handleNodeActivate(t);
+    }), this.listen("arcgisLayoutDeactivateNode", (t) => {
+      this._handleNodeDeactivate(t);
+    }), this.listen("arcgisLayoutNodeChange", async (t) => {
       await this._handleLayoutNodeEditorChange(t);
     }), this.listen("arcgisLayoutNodeVisibilityChange", async (t) => {
       await this._handleLayoutNodeVisibilityChange(t);
-    }), this.listen("arcgisLayoutNodeHighlight", (t) => this._handleNodeHighlight(t)), this.listen("arcgisLayoutNodeUnHighlight", (t) => this._handleNodeUnHighlight(t)), this.listen("arcgisLayoutNodeEditorOpen", this._handleLayoutNodeEditorOpen), this.listen("arcgisLayoutAddNode", async (t) => {
+    }), this.listen("arcgisLayoutNodeEditorOpen", (t) => {
+      this._handleLayoutNodeEditorOpen(t);
+    }), this.listen("arcgisLayoutAddNode", async (t) => {
       await this._handleLayoutAddNode(t);
     }), this.listen("arcgisLayoutNodeReposition", async (t) => {
       await this._handleLayoutRepositionNode(t);
     }), this.listen("arcgisLayoutDeleteNode", async (t) => await this._handleLayoutDeleteNode(t)), this.listenOn(window, "resize", this._initShell);
   }
   static {
-    this.properties = { _liveAnnouncement: 16, _processedLayout: 16, _layoutErrors: 16, _highlightedNode: 16, _highlightedElement: 16, _layoutNodeEditorConfig: 16, _historyStack: 16, _historyIdx: 16, _isLayoutDirty: 16, _isLayoutValid: 16, _isEditPanelOpen: 16, layout: 0, debug: 7, isEditMode: 7, isPublishing: 5, options: 0 };
+    this.properties = { _liveAnnouncement: 16, _processedLayout: 16, _layoutErrors: 16, _activatedNode: 16, _layoutNodeEditorConfig: 16, _historyStack: 16, _historyIdx: 16, _isLayoutDirty: 16, _isLayoutValid: 16, _isEditPanelOpen: 16, layout: 0, debug: 7, isEditMode: 7, isPublishing: 5, options: 0 };
   }
   static {
-    this.shadowRootOptions = T;
+    this.shadowRootOptions = I;
   }
   static {
-    this.styles = W;
+    this.styles = K;
   }
   get _context() {
-    return j();
+    return U();
   }
-  #i;
   #t;
   connectedCallback() {
     super.connectedCallback(), this._initShell();
   }
   willUpdate(t) {
-    (t.has("layout") || t.has("options")) && this._init(), this.hasUpdated && t.has("isEditMode") && (this._highlightedElement = void 0, this._highlightedNode = void 0, this._layoutNodeEditorConfig = void 0, this.updateEditModeAnnouncement(), this.isEditMode && lt(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((e) => {
+    (t.has("layout") || t.has("options")) && this._init(), this.hasUpdated && t.has("isEditMode") && (this._activatedNode = void 0, this._layoutNodeEditorConfig = void 0, this.updateEditModeAnnouncement(), this.isEditMode && lt(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((e) => {
       e.lazy = !1;
-    })), (!this.hasUpdated || t.has("_processedLayout")) && this.#i.setValue({ messages: this._messages, layout: this._processedLayout });
+    })), (!this.hasUpdated || t.has("_processedLayout") || t.has("_isLayoutValid")) && this.#t.setValue({
+      messages: this._messages,
+      layout: this._processedLayout,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      layoutNodeEditorRef: this.#t.value?.layoutNodeEditorRef,
+      isLayoutValid: this._isLayoutValid
+    });
   }
   _initShell() {
     const t = this.el;
@@ -300,29 +318,30 @@ class dt extends R {
     const t = await super.getUpdateComplete();
     return await this._layoutRef.value?.updateComplete, await new Promise((s) => setTimeout(s, 150)), t;
   }
-  suspendSelection() {
-    this.#t = !0;
-  }
-  resumeSelection() {
-    this.#t = !1;
-  }
   async updateEditModeAnnouncement() {
     this._liveAnnouncement = "";
     const t = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
     await this.updateComplete, this._liveAnnouncement = t;
   }
-  async _updateLayoutNode(t, s, e, o, a, n) {
-    const h = f(this._layout), l = m(h, t);
-    l && (H(s, e, l), o && (h.variables = {
-      ...h.variables,
-      ...o
-    }), this._layout = h, this._processedLayout = await this._validateAndProcess(h, this.options), this._highlightedNode = m(this._processedLayout, t), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutValid = a, this._isNodeDirty = !0, this._isLayoutDirty = !0, n && n());
+  async _updateLayoutNode(t, s, e, a, o, n) {
+    const r = f(this._layout), l = m(r, t);
+    l && (V(s, e, l), a && (r.variables = {
+      ...r.variables,
+      ...a
+    }), this._layout = r, this._processedLayout = await this._validateAndProcess(r, this.options), this._activatedNode = m(this._processedLayout, t), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutValid = o, this._isNodeDirty = !0, this._isLayoutDirty = !0, n && n());
+  }
+  _handleNodeActivate(t) {
+    const { node: s } = t.detail;
+    this._activatedNode = s;
+  }
+  _handleNodeDeactivate(t) {
+    t.detail.node.id === this._activatedNode?.id && (this._activatedNode = void 0);
   }
   async _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: s, id: e, values: o, valid: a } = t.detail, n = m(this._layout, e);
+    const { layoutNodeConfig: s, id: e, values: a, valid: o } = t.detail, n = m(this._layout, e);
     if (n) {
-      const l = (S(s, "editor.valuesOutCallback") || ((d) => d))(o, { nodeId: e, valid: a }), u = l.variables;
-      delete l.variables, n.properties = O(n.properties, l), await this._updateLayoutNode(e, "properties", n.properties, u, a, () => {
+      const l = (S(s, "editor.valuesOutCallback") || ((c) => c))(a, { nodeId: e, valid: o }), u = l.variables;
+      delete l.variables, n.properties = O(n.properties, l), await this._updateLayoutNode(e, "properties", n.properties, u, o, () => {
         this.arcgisHubLayoutChanged.emit();
       });
     }
@@ -334,88 +353,62 @@ class dt extends R {
     }));
   }
   async _validateAndProcess(t, s) {
-    const e = Q(t);
-    return this._layoutErrors = e, e.length > 0 && !this.debug && y.error("Layout validation errors:", e), await B(t, { ...s }, this._context);
-  }
-  hitTest(t) {
-    let s = !1;
-    if (this._highlightedElement) {
-      const e = this._highlightedElement.getBoundingClientRect();
-      t.clientX >= e.left && t.clientX <= e.right && t.clientY >= e.top && t.clientY <= e.bottom && (s = !0);
-    }
-    return s;
-  }
-  _handleNodeHighlight(t) {
-    if (t.stopPropagation(), this.#t)
-      return;
-    y.debug("NODE HIGHLIGHT EVENT >>>", t);
-    const s = t.detail.target, e = s.dataset.nodeId || "";
-    if (e) {
-      const o = m(this._processedLayout, e);
-      o ? this._highlightedNode !== o && this._highlightedElement !== s && (this._highlightedNode = o, this._highlightedElement = s) : y.warn(`No node found for target with id ${e}`);
-    }
-  }
-  _handleNodeUnHighlight(t) {
-    t.stopPropagation(), !this.#t && (y.debug("NODE UNHIGHLIGHT EVENT >>>", t), !this._nodeControlsRef.value?.matches(":hover") && !this.hitTest(t.detail) && (this._highlightedNode = void 0, this._highlightedElement = void 0));
-  }
-  _handleNodeControlsMouseOut(t) {
-    this.#t || this.hitTest(t) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
+    const e = Y(t);
+    return this._layoutErrors = e, e.length > 0 && !this.debug && p.error("Layout validation errors:", e), await z(t, { ...s }, this._context);
   }
   _handleLayoutNodeEditorOpen(t) {
-    if (!this._highlightedElement || !this._highlightedNode)
-      return;
+    const { node: s, element: e } = t.detail;
+    this.openLayoutNodeEditor(e, s);
+  }
+  openLayoutNodeEditor(t, s) {
     this._isEditPanelOpen = !0;
-    let s = F(this._highlightedElement, this._highlightedNode);
-    s && (s = G(this._messages, s)), this._layoutNodeEditorConfig = {
-      layoutNodeConfig: f(s),
-      layoutNode: f(this._highlightedNode)
-    }, this._nodeBeforeEdit = f(this._highlightedNode);
+    let e = F(t, s);
+    e && (e = q(this._messages, e)), this._layoutNodeEditorConfig = {
+      layoutNodeConfig: f(e),
+      layoutNode: f(s)
+    }, this._nodeBeforeEdit = f(this._activatedNode);
   }
   async _handleLayoutAddNode(t) {
-    y.debug("Add node event:", t.detail.config.tag);
-    const s = f(this._layout), { column: e, index: o } = P(t.detail.adjacentNode, s);
-    y.debug("Found column and index:", e, o);
-    const a = {
-      id: V(),
+    p.debug("Add node event:", t.detail.config.tag);
+    const s = f(this._layout), { column: e, index: a } = A(t.detail.adjacentNode, s);
+    p.debug("Found column and index:", e, a);
+    const o = {
+      id: H(),
       tag: t.detail.config.tag,
       properties: t.detail.config.defaults
     };
-    e.children?.splice(o + 1, 0, a), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), this._highlightedNode = a, await this.updateComplete, this._highlightedElement = await this._layoutRef.value?.getCardEl(a.id), this._handleLayoutNodeEditorOpen(), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit(), t.detail.config.telemetry && this.hubTelemetry.emit(t.detail.config.telemetry);
+    e.children?.splice(a + 1, 0, o), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), await this.updateComplete, this._activatedNode = o;
+    const n = await this._layoutRef.value?.getCardEl(o.id);
+    this.openLayoutNodeEditor(n, this._activatedNode), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit(), t.detail.config.telemetry && this.hubTelemetry.emit(t.detail.config.telemetry);
   }
   async _handleLayoutRepositionNode(t) {
-    y.debug("Reposition node event:", t.detail.node.id, t.detail.direction), t.detail.direction === "up" ? (y.debug("Moving node up..."), this._layout = ht(t.detail.node, this._layout)) : (y.debug("Moving node down..."), this._layout = rt(t.detail.node, this._layout)), this.suspendSelection(), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._highlightedNode = t.detail.node, await this.updateComplete, this._highlightedElement = await this._layoutRef.value?.getCardEl(t.detail.node.id), this._highlightedElement?.scrollIntoView({ behavior: "smooth", block: "nearest" }), requestAnimationFrame(() => {
-      this.resumeSelection();
-    }), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
+    p.debug("Reposition node event:", t.detail.node.id, t.detail.direction), this._activatedNode = void 0, t.detail.direction === "up" ? (p.debug("Moving node up..."), this._layout = rt(t.detail.node, this._layout)) : (p.debug("Moving node down..."), this._layout = dt(t.detail.node, this._layout)), this._processedLayout = await this._validateAndProcess(this._layout, this.options), await this.updateComplete, this._activatedNode = t.detail.node, (await this._layoutRef.value?.getCardEl(t.detail.node.id))?.scrollIntoView({ behavior: "smooth", block: "nearest" }), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
   }
   async _handleLayoutDeleteNode(t) {
-    y.debug("Delete node event:", t.detail.id);
-    const { id: s } = t.detail, e = f(this._layout), o = m(e, s);
-    if (o) {
-      const { column: a, index: n } = P(o, e);
-      a.children?.splice(n, 1), this._layout = e, this._processedLayout = await this._validateAndProcess(e, this.options), this._highlightedNode = void 0, this._highlightedElement = void 0, this._handleCloseEditPanel(), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
+    p.debug("Delete node event:", t.detail.id);
+    const { id: s } = t.detail, e = f(this._layout), a = m(e, s);
+    if (a) {
+      const { column: o, index: n } = A(a, e);
+      o.children?.splice(n, 1), this._layout = e, this._processedLayout = await this._validateAndProcess(e, this.options), this._activatedNode = void 0, this._handleCloseEditPanel(), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
     }
   }
   renderEditToolbar() {
     let t;
-    return this.isEditMode && (t = p`<arcgis-layout-editor-toolbar .exitEditMode=${this._handleExitEditMode} .isLayoutDirty=${this._isLayoutDirty} .isLayoutValid=${this._isLayoutValid} .isPublishing=${this.isPublishing} .publishLayout=${this._handlePublishLayout} slot=header></arcgis-layout-editor-toolbar>`), t;
-  }
-  renderNodeControls() {
-    let t;
-    return this.isEditMode && this._highlightedElement && this._highlightedNode && (t = p`<arcgis-layout-node-controls .layoutNodeEditorRef=${this._layoutNodeEditorRef.value} .isEditMode=${this.isEditMode} .isLayoutValid=${this._isLayoutValid} .layout=${this._processedLayout} .messages=${this._messages} .node=${this._highlightedNode} @mouseout=${this._handleNodeControlsMouseOut} .referenceElement=${this._highlightedElement} style="position: absolute;" ${v(this._nodeControlsRef)}></arcgis-layout-node-controls>`), t;
+    return this.isEditMode && (t = _`<arcgis-layout-editor-toolbar .exitEditMode=${this._handleExitEditMode} .isLayoutDirty=${this._isLayoutDirty} .isLayoutValid=${this._isLayoutValid} .isPublishing=${this.isPublishing} .publishLayout=${this._handlePublishLayout} slot=header></arcgis-layout-editor-toolbar>`), t;
   }
   renderEditor() {
-    if (this.isEditMode && this._isEditPanelOpen) {
-      const t = this._layoutNodeEditorConfig;
-      if (t?.layoutNodeConfig?.editor)
-        return p`<calcite-shell-panel position=end slot=panel-end><calcite-panel .heading=${U(t.layoutNodeConfig, "i18n.label", S(this._messages, "layoutNodeControls.configurableNodes.default.label"))}><calcite-action class="panel-close" icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${$(t.layoutNode.id, p`<arcgis-layout-node-editor .layoutNodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode} ${v(this._layoutNodeEditorRef)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
+    let t;
+    if (this.isEditMode) {
+      const s = this._layoutNodeEditorConfig;
+      t = _`<calcite-shell-panel .collapsed=${!this._isEditPanelOpen} position=end slot=panel-end><calcite-panel .heading=${j(s || {}, "layoutNodeConfig.i18n.label", S(this._messages, "layoutNodeControls.configurableNodes.default.label"))} id=editor-panel ${$(this._setlayoutNodeEditorRef)}>${s?.layoutNodeConfig?.editor && _`<calcite-action class="panel-close" icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${w(s.layoutNode.id, _`<arcgis-layout-node-editor .layoutNodeConfig=${s.layoutNodeConfig} .node=${s.layoutNode}></arcgis-layout-node-editor>`)}` || ""}</calcite-panel></calcite-shell-panel>`;
     }
-    return null;
+    return t;
   }
   render() {
-    return p`<calcite-shell>${$("aria-live-region", p`<div aria-atomic=true aria-live=polite id=arcgis-layout-container-edit-mode-live-region>${this._liveAnnouncement}</div>`)}${this.renderEditToolbar()}${this.renderNodeControls()}${this.renderEditor()}<arcgis-layout .highlightedNode=${this._highlightedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .layout=${this._processedLayout} .options=${this.options} ${v(this._layoutRef)}></arcgis-layout></calcite-shell>`;
+    return _`<calcite-shell>${w("aria-live-region", _`<div aria-atomic=true aria-live=polite id=arcgis-layout-container-edit-mode-live-region>${this._liveAnnouncement}</div>`)}${this.renderEditToolbar()}${this.renderEditor()}<arcgis-layout .activatedNode=${this._activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .layout=${this._processedLayout} .options=${this.options} ${$(this._layoutRef)}></arcgis-layout></calcite-shell>`;
   }
 }
-A("arcgis-layout-container", dt);
+P("arcgis-layout-container", ct);
 export {
-  dt as ArcgisLayoutContainer
+  ct as ArcgisLayoutContainer
 };

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

@@ -1,5 +1,4 @@
 import "../arcgis-layout-editor-toolbar/index.js";
-import "../arcgis-layout-node-controls/index.js";
 import "@esri/calcite-components/components/calcite-shell-panel";
 import "@esri/calcite-components/components/calcite-panel";
 import "@esri/calcite-components/components/calcite-action";

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

@@ -1,5 +1,4 @@
 import "../arcgis-layout-editor-toolbar/index.js";
-import "../arcgis-layout-node-controls/index.js";
 import "@esri/calcite-components/components/calcite-shell-panel";
 import "@esri/calcite-components/components/calcite-panel";
 import "@esri/calcite-components/components/calcite-action";

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

@@ -1,15 +1,15 @@
 import { c as i } from "../../chunks/runtime.js";
 import { html as s } from "lit-html";
-import { LitElement as e } from "@arcgis/lumina";
-import { css as o } from "@lit/reactive-element/css-tag.js";
+import { LitElement as o } from "@arcgis/lumina";
+import { css as e } from "@lit/reactive-element/css-tag.js";
 import { u as a } from "../../chunks/useT9n.js";
 import { focusElement as l } from "@arcgis/toolkit/dom";
 import { createRef as r, ref as n } from "lit/directives/ref.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 c = o`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
-class u extends e {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+const c = 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 d extends o {
   constructor() {
     super(...arguments), this._messages = a(), this._exitButtonRef = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
   }
@@ -34,7 +34,7 @@ class u extends e {
     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._disalbedPublishTooltip}><calcite-button .disabled=${this._isPublishDisabled} .loading=${this.isPublishing} @click=${this.publishLayout} round>${this._messages.publish}</calcite-button></arcgis-ref-tooltip></div></calcite-navigation>`;
   }
 }
-i("arcgis-layout-editor-toolbar", u);
+i("arcgis-layout-editor-toolbar", d);
 export {
-  u as ArcgisLayoutEditorToolbar
+  d as ArcgisLayoutEditorToolbar
 };