@esri/hub-web-components 0.24.0 → 0.26.0

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

@@ -1,71 +1,72 @@
 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 T, createEvent as E, noShadowRoot as I } from "@arcgis/lumina";
-import { createRef as L, ref as b } from "lit/directives/ref.js";
-import { l as M, g as D, i as H } from "../../chunks/interpolate-translations.js";
-import { css as O } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as x, cloneObject as f, setProp as V, getProp as S, deepMerge as U, Logger as y, createId as j, getWithDefault as B } from "@esri/hub-common";
-import { g as z } from "../../chunks/state.js";
-import { f as m, p as F } from "../../chunks/processLayout.js";
-import { c as G, b as w, i as N, a as C } from "../../chunks/typeGuards.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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.24/esri/copyright.txt for details.
-v0.24.0 */
-const W = O`@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}}}`;
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.0 */
+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) {
   const s = ["order", "offset", "width"], e = [];
-  return s.forEach((n) => {
-    let o;
-    w(i) && (o = i.sectionProps?.[n]), N(i) && (o = i.rowProps?.[n]), C(i) && (o = i.columnProps?.[n]), typeof o == "number" ? (o < 0 || o > 12) && e.push(`Node "${i.id}": ${t} > ${n} out of range (0-12): ${o}`) : typeof o == "object" && Object.entries(o).forEach(([a, h]) => {
-      typeof h == "number" && (h < 0 || h > 12) && e.push(`Node "${i.id}": ${t} > ${n}.${a} out of range (0-12): ${h}`);
+  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}`);
     });
   }), e;
 }
 function K(i, t, s, e) {
-  const n = [];
-  return i.id || n.push(`${t} > missing required id.`), i.tag || n.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && n.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), e.includes(i.tag) || n.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), n.push(...J(i, t)), (w(i) || N(i) || C(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && n.push(`Node "${i.id}": ${t} > missing or empty children array.`), n;
+  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 v({ node: i, nodePath: t, idSet: s, validTags: e, errors: n }) {
+function b({ node: i, nodePath: t, idSet: s, validTags: e, errors: o }) {
   if (i.tag === "arcgis-nav-card") {
-    const o = i.properties;
-    o && typeof o == "object" && Array.isArray(o.sections) && o.sections.forEach((h, c) => {
-      const u = `${t}.sections[${c}]`;
-      v({
+    const a = i.properties;
+    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((h, l) => {
+      const u = `${t}.sections[${l}]`;
+      b({
         node: h,
         nodePath: u,
         idSet: s,
         validTags: ["arcgis-layout-section"],
-        errors: n
+        errors: o
       });
     });
   }
-  n.push(...K(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((o, a) => {
-    let h = `${t}.Child[${a}]`, c = Array.from(x);
-    w(i) ? (c = ["arcgis-layout-row"], h = `${t}.Row[${a}]`) : N(i) ? (c = ["arcgis-layout-column"], h = `${t}.Column[${a}]`) : C(i) && (c = Array.from(x).filter(
+  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(
       (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
-    )), v({
-      node: o,
+    )), b({
+      node: a,
       nodePath: h,
       idSet: s,
-      validTags: c,
-      errors: n
+      validTags: l,
+      errors: o
     });
   });
 }
 function Q(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, n) => {
-    if (G(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, o) => {
+    if (z(e))
       return;
-    const o = e, a = `Section[${n}]`;
-    v({
-      node: o,
-      nodePath: a,
+    const a = e, n = `Section[${o}]`;
+    b({
+      node: a,
+      nodePath: n,
       idSet: s,
       validTags: ["arcgis-layout-section"],
       errors: t
@@ -108,43 +109,43 @@ function ot(i, t) {
   if (i.children && t > 0)
     return i.children[t - 1];
 }
-function nt(i, t) {
+function at(i, t) {
   if (t < i.sections.length - 1)
     return i.sections[t + 1];
 }
-function at(i, t) {
+function nt(i, t) {
   if (t > 0)
     return i.sections[t - 1];
 }
 function ht(i, t) {
   const s = f(t);
-  function e(n) {
-    for (let o = 0; o < n.sections.length; o++) {
-      const a = n.sections[o];
-      if (a.children)
-        for (let h = 0; h < a.children.length; h++) {
-          const c = a.children[h];
-          if (c.children)
-            for (let u = 0; u < c.children.length; u++) {
-              const d = c.children[u];
+  function e(o) {
+    for (let a = 0; a < o.sections.length; a++) {
+      const n = o.sections[a];
+      if (n.children)
+        for (let h = 0; h < n.children.length; h++) {
+          const l = n.children[h];
+          if (l.children)
+            for (let u = 0; u < l.children.length; u++) {
+              const d = l.children[u];
               if (d.children)
-                for (let l = 0; l < d.children.length; l++) {
-                  const g = d.children[l];
+                for (let c = 0; c < d.children.length; c++) {
+                  const g = d.children[c];
                   if (g.id === i.id)
-                    if (l > 0) {
-                      const r = d.children[l - 1];
-                      return d.children[l - 1] = d.children[l], d.children[l] = r, !0;
+                    if (c > 0) {
+                      const r = d.children[c - 1];
+                      return d.children[c - 1] = d.children[c], d.children[c] = r, !0;
                     } else {
                       if (u > 0)
-                        return d.children.splice(l, 1), c.children[u - 1].children?.push(i), !0;
+                        return d.children.splice(c, 1), l.children[u - 1].children?.push(i), !0;
                       if (h > 0) {
-                        d.children.splice(l, 1);
-                        const r = ot(a, h);
+                        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 (o > 0) {
-                        d.children.splice(l, 1);
-                        const r = at(n, o);
+                      } 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)
@@ -169,33 +170,33 @@ function ht(i, t) {
 }
 function rt(i, t) {
   const s = f(t);
-  function e(n) {
-    for (let o = 0; o < n.sections.length; o++) {
-      const a = n.sections[o];
-      if (a.children)
-        for (let h = 0; h < a.children.length; h++) {
-          const c = a.children[h];
-          if (c.children)
-            for (let u = 0; u < c.children.length; u++) {
-              const d = c.children[u];
+  function e(o) {
+    for (let a = 0; a < o.sections.length; a++) {
+      const n = o.sections[a];
+      if (n.children)
+        for (let h = 0; h < n.children.length; h++) {
+          const l = n.children[h];
+          if (l.children)
+            for (let u = 0; u < l.children.length; u++) {
+              const d = l.children[u];
               if (d.children)
-                for (let l = 0; l < d.children.length; l++) {
-                  const g = d.children[l];
+                for (let c = 0; c < d.children.length; c++) {
+                  const g = d.children[c];
                   if (g.id === i.id)
-                    if (l < d.children.length - 1) {
-                      const r = d.children[l + 1];
-                      return d.children[l + 1] = d.children[l], d.children[l] = r, !0;
+                    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;
                     } else {
-                      if (u < c.children.length - 1)
-                        return d.children.splice(l, 1), c.children[u + 1].children?.unshift(i), !0;
-                      if (h < a.children.length - 1) {
-                        d.children.splice(l, 1);
-                        const r = st(a, h);
+                      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 (o < n.sections.length - 1) {
-                        d.children.splice(l, 1);
-                        const r = nt(n, o);
+                      } 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)
@@ -220,23 +221,23 @@ function rt(i, t) {
 }
 function lt(i, t) {
   const s = [];
-  function e(n) {
-    if (n.nodeType === Node.ELEMENT_NODE) {
-      const o = n;
-      o.matches(t) && s.push(o);
-      const a = o.shadowRoot;
-      a && e(a);
-      for (const h of Array.from(o.children))
+  function e(o) {
+    if (o.nodeType === Node.ELEMENT_NODE) {
+      const a = o;
+      a.matches(t) && s.push(a);
+      const n = a.shadowRoot;
+      n && e(n);
+      for (const h of Array.from(a.children))
         e(h);
-    } else if (n instanceof ShadowRoot)
-      for (const o of Array.from(n.children))
-        e(o);
+    } else if (o instanceof ShadowRoot)
+      for (const a of Array.from(o.children))
+        e(a);
   }
   return e(i), s;
 }
 class dt extends R {
   constructor() {
-    super(), this._messages = q({ blocking: !0 }), this.#i = T({ context: M }), this.#t = !1, this._isNodeDirty = !1, this._layoutRef = L(), this._nodeControlsRef = L(), this._layoutNodeEditorRef = L(), this._handleExitEditMode = async (t) => {
+    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) => {
       t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
     }, this._handlePublishLayout = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutPublished.emit({
@@ -249,7 +250,7 @@ class dt extends R {
       if (this._isNodeDirty && !this._isLayoutValid) {
         if (!window.confirm(this._messages.invalidDirtyStateMessage))
           return;
-        await this._updateLayoutNode(this._nodeBeforeEdit.id, "properties", this._nodeBeforeEdit.properties, !0);
+        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,
@@ -269,13 +270,13 @@ class dt extends R {
     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 };
   }
   static {
-    this.shadowRootOptions = I;
+    this.shadowRootOptions = T;
   }
   static {
     this.styles = W;
   }
   get _context() {
-    return z();
+    return j();
   }
   #i;
   #t;
@@ -310,28 +311,31 @@ class dt extends R {
     const t = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
     await this.updateComplete, this._liveAnnouncement = t;
   }
-  async _updateLayoutNode(t, s, e, n, o) {
-    const a = f(this._layout), h = m(a, t);
-    h && (V(s, e, h), this._layout = a, this._processedLayout = await this._validateAndProcess(a, 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 = n, this._isNodeDirty = !0, this._isLayoutDirty = !0, o && o());
+  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 _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: s, id: e, values: n, valid: o } = t.detail, a = m(this._layout, e);
-    if (a) {
-      const h = S(s, "editor.valuesOutCallback") || ((c) => c);
-      a.properties = U(a.properties, h(n)), await this._updateLayoutNode(e, "properties", a.properties, o, () => {
+    const { layoutNodeConfig: s, id: e, values: o, valid: a } = 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, () => {
         this.arcgisHubLayoutChanged.emit();
       });
     }
   }
   async _handleLayoutNodeVisibilityChange(t) {
     const { id: s } = t.detail, e = m(this._layout, s);
-    e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && await this._updateLayoutNode(s, "visibility", { ...e.visibility, isHidden: !e.visibility.isHidden }, !0, () => {
+    e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && await this._updateLayoutNode(s, "visibility", { ...e.visibility, isHidden: !e.visibility.isHidden }, void 0, !0, () => {
       this.arcgisHubLayoutChanged.emit();
     }));
   }
   async _validateAndProcess(t, s) {
     const e = Q(t);
-    return this._layoutErrors = e, e.length > 0 && !this.debug && y.error("Layout validation errors:", e), await F(t, s, this._context);
+    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;
@@ -347,8 +351,8 @@ class dt extends R {
     y.debug("NODE HIGHLIGHT EVENT >>>", t);
     const s = t.detail.target, e = s.dataset.nodeId || "";
     if (e) {
-      const n = m(this._processedLayout, e);
-      n ? this._highlightedNode !== n && this._highlightedElement !== s && (this._highlightedNode = n, this._highlightedElement = s) : y.warn(`No node found for target with id ${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) {
@@ -361,22 +365,22 @@ class dt extends R {
     if (!this._highlightedElement || !this._highlightedNode)
       return;
     this._isEditPanelOpen = !0;
-    let s = D(this._highlightedElement, this._highlightedNode);
-    s && (s = H(this._messages, s)), this._layoutNodeEditorConfig = {
+    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);
   }
   async _handleLayoutAddNode(t) {
     y.debug("Add node event:", t.detail.config.tag);
-    const s = f(this._layout), { column: e, index: n } = P(t.detail.adjacentNode, s);
-    y.debug("Found column and index:", e, n);
-    const o = {
-      id: j(),
+    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(),
       tag: t.detail.config.tag,
       properties: t.detail.config.defaults
     };
-    e.children?.splice(n + 1, 0, o), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), this._highlightedNode = o, await this.updateComplete, this._highlightedElement = await this._layoutRef.value?.getCardEl(o.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(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);
   }
   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(() => {
@@ -385,10 +389,10 @@ class dt extends R {
   }
   async _handleLayoutDeleteNode(t) {
     y.debug("Delete node event:", t.detail.id);
-    const { id: s } = t.detail, e = f(this._layout), n = m(e, s);
-    if (n) {
-      const { column: o, index: a } = P(n, e);
-      o.children?.splice(a, 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();
+    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();
     }
   }
   renderEditToolbar() {
@@ -397,18 +401,18 @@ class dt extends R {
   }
   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;" ${b(this._nodeControlsRef)}></arcgis-layout-node-controls>`), 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;
   }
   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=${B(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} ${b(this._layoutNodeEditorRef)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
+        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>`;
     }
     return null;
   }
   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} ${b(this._layoutRef)}></arcgis-layout></calcite-shell>`;
+    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>`;
   }
 }
 A("arcgis-layout-container", dt);

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

@@ -6,8 +6,8 @@ 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.24/esri/copyright.txt for details.
-v0.24.0 */
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.0 */
 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 {
   constructor() {

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

@@ -3,17 +3,18 @@ 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 { l as g, g as f, i as m } from "../../chunks/interpolate-translations.js";
-import { i as y } from "../../chunks/isNodeVisible.js";
+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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.24/esri/copyright.txt for details.
-v0.24.0 */
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.0 */
 const b = h`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
 class C extends c {
   constructor() {
-    super(...arguments), this.#e = u({ context: g, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.hubTelemetry = s(), this.arcgisLayoutNodeEditorOpen = s(), this.arcgisLayoutNodeVisibilityChange = s(), this.arcgisLayoutNodeReposition = s(), this.arcgisLayoutDeleteNode = s();
+    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();
   }
   static {
     this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
@@ -24,8 +25,8 @@ class C extends c {
   get _layoutNodeConfig() {
     if (!this.referenceElement || !this.node)
       return;
-    let e = f(this.referenceElement, this.node);
-    return e && (e = m(this.messages, e)), p(e);
+    let e = g(this.referenceElement, this.node);
+    return e && (e = f(this.messages, e)), p(e);
   }
   #e;
   get layout() {
@@ -54,7 +55,7 @@ class C extends c {
     return this._layoutNodeConfig?.disableDelete ? e = this.messages.layoutNodeControls.deletePremiumOnlyTooltip : this.node?.readOnly && (e = this.messages.layoutNodeControls.readOnlyTooltip), e;
   }
   get _isNodeVisible() {
-    return y(this.node);
+    return m(this.node);
   }
   _onOpenEditorButtonClick() {
     this.arcgisLayoutNodeEditorOpen.emit(), this.hubTelemetry.emit({

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

@@ -2,6 +2,7 @@
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { IConfigurationValues, ILayoutNodeChangeEventDetail, ILayoutNodeConfig, LayoutNode } from '@esri/hub-common';
 import { PropertyValues } from 'lit';
+import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
 
 /** @private */
 export declare class ArcgisLayoutNodeEditor extends LitElement {

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

@@ -1,26 +1,31 @@
-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 { 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 { createRef as g, ref as f } 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";
+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.24/esri/copyright.txt for details.
-v0.24.0 */
-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 {
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.0 */
+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() {
-    super(...arguments), this._configEditorRef = h(), this._values = {}, this.arcgisLayoutNodeChange = d();
+    super(...arguments), this._configEditorRef = g(), this.#o = d({ context: p }), this._values = {}, this.arcgisLayoutNodeChange = l();
   }
   static {
     this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = v;
   }
   static {
-    this.shadowRootOptions = u;
+    this.shadowRootOptions = c;
+  }
+  #o;
+  get _messages() {
+    return this.#o.value.messages;
   }
   setFocus() {
     this._configEditorRef.value?.setFocus();
@@ -31,36 +36,39 @@ class m extends n {
   updated(o) {
     (o.has("layoutNodeConfig") || o.has("node")) && this.setFocus();
   }
+  t() {
+    return (o) => e(this._messages, o) || o;
+  }
   init() {
     if (!this.node || !this.layoutNodeConfig)
       return;
-    const o = l(this.layoutNodeConfig, "editor.valuesInCallback") || ((t) => t);
+    const o = e(this.layoutNodeConfig, "editor.valuesInCallback") || ((t) => t);
     this._values = o(this.node.properties);
   }
   _handleConfigurationEditorChange(o) {
     o.stopPropagation();
-    const { values: t = {}, valid: s } = o.detail, i = c(t, this._values);
+    const { values: t = {}, valid: r } = o.detail, i = h(t, this._values);
     this._values = i, this.arcgisLayoutNodeChange.emit({
       layoutNodeConfig: this.layoutNodeConfig,
       values: i,
-      valid: s,
+      valid: r,
       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: {
+    const o = s(this.layoutNodeConfig || {}, "editor.inputChangeEvent", "arcgisHubGalleryCardEditorChange"), t = s(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: {} }} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${g(this._configEditorRef)}></arcgis-configuration-editor>`;
+    } }) : 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>`;
   }
   render() {
     return !this.node || !this.layoutNodeConfig ? a`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
   }
 }
-r("arcgis-layout-node-editor", m);
+n("arcgis-layout-node-editor", y);
 export {
-  m as ArcgisLayoutNodeEditor
+  y as ArcgisLayoutNodeEditor
 };

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

@@ -1,8 +1,8 @@
 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.24/esri/copyright.txt for details.
-v0.24.0 */
+See https://js.arcgis.com/0.26/esri/copyright.txt for details.
+v0.26.0 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r