@esri/hub-web-components 0.16.2 → 0.18.0

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

@@ -1,163 +1,163 @@
 import { c as A } from "../../chunks/runtime.js";
-import { html as p } from "lit-html";
-import { keyed as C } from "lit-html/directives/keyed.js";
-import { LitElement as P, useContextProvider as I, createEvent as N, noShadowRoot as T } from "@arcgis/lumina";
+import { html as _ } from "lit-html";
+import { keyed as $ } from "lit-html/directives/keyed.js";
+import { LitElement as k, useContextProvider as R, createEvent as E, noShadowRoot as T } from "@arcgis/lumina";
 import { createRef as L, ref as b } from "lit/directives/ref.js";
-import { l as M, g as R, 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, getProp as S, deepMerge as V, Logger as y, createId as D, getWithDefault as U } from "@esri/hub-common";
-import { g as j } from "../../chunks/state.js";
+import { l as M, g as I, i as H } from "../../chunks/interpolate-translations.js";
+import { css as D } from "@lit/reactive-element/css-tag.js";
+import { layoutNodeTags as x, cloneObject as f, setProp as O, getProp as S, deepMerge as V, Logger as y, createId as U, getWithDefault as j } from "@esri/hub-common";
+import { g as B } from "../../chunks/state.js";
 import { f as m, p as z } from "../../chunks/processLayout.js";
-import { c as F, b as w, i as E, a as $ } from "../../chunks/typeGuards.js";
+import { c as F, b as w, i as N, a as C } from "../../chunks/typeGuards.js";
 import { u as G } from "../../chunks/useT9n.js";
 import { migrateSchema as q } from "@esri/hub-components";
-import { f as B } from "../../chunks/findColumnAndNodeIndex.js";
-import { dictionary as X } from "@esri/telemetry-dictionary-hub";
+import { f as X } 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.16/esri/copyright.txt for details.
-v0.16.2 */
-const Y = 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}}}`;
-function W(i, t) {
-  const e = ["order", "offset", "width"], s = [];
-  return e.forEach((o) => {
-    let n;
-    w(i) && (n = i.sectionProps?.[o]), E(i) && (n = i.rowProps?.[o]), $(i) && (n = i.columnProps?.[o]), typeof n == "number" ? (n < 0 || n > 12) && s.push(`Node "${i.id}": ${t} > ${o} out of range (0-12): ${n}`) : typeof n == "object" && Object.entries(n).forEach(([r, a]) => {
-      typeof a == "number" && (a < 0 || a > 12) && s.push(`Node "${i.id}": ${t} > ${o}.${r} out of range (0-12): ${a}`);
+See https://js.arcgis.com/0.18/esri/copyright.txt for details.
+v0.18.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(t, i) {
+  const s = ["order", "offset", "width"], e = [];
+  return s.forEach((n) => {
+    let o;
+    w(t) && (o = t.sectionProps?.[n]), N(t) && (o = t.rowProps?.[n]), C(t) && (o = t.columnProps?.[n]), typeof o == "number" ? (o < 0 || o > 12) && e.push(`Node "${t.id}": ${i} > ${n} out of range (0-12): ${o}`) : typeof o == "object" && Object.entries(o).forEach(([a, r]) => {
+      typeof r == "number" && (r < 0 || r > 12) && e.push(`Node "${t.id}": ${i} > ${n}.${a} out of range (0-12): ${r}`);
     });
-  }), s;
+  }), e;
 }
-function J(i, t, e, s) {
-  const o = [];
-  return i.id || o.push(`${t} > missing required id.`), i.tag || o.push(`${t} > missing required tag.`), i.id && (e.has(i.id) && o.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), e.add(i.id)), s.includes(i.tag) || o.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), o.push(...W(i, t)), (w(i) || E(i) || $(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && o.push(`Node "${i.id}": ${t} > missing or empty children array.`), o;
+function K(t, i, s, e) {
+  const n = [];
+  return t.id || n.push(`${i} > missing required id.`), t.tag || n.push(`${i} > missing required tag.`), t.id && (s.has(t.id) && n.push(`Node "${t.id}": ${i} > duplicate id: "${t.id}"`), s.add(t.id)), e.includes(t.tag) || n.push(`Node "${t.id}": ${i} > has invalid tag: ${t.tag}`), n.push(...J(t, i)), (w(t) || N(t) || C(t)) && (!t.children || !Array.isArray(t.children) || t.children.length === 0) && n.push(`Node "${t.id}": ${i} > missing or empty children array.`), n;
 }
-function v({ node: i, nodePath: t, idSet: e, validTags: s, errors: o }) {
-  if (i.tag === "arcgis-nav-card") {
-    const n = i.properties;
-    n && typeof n == "object" && Array.isArray(n.sections) && n.sections.forEach((a, c) => {
-      const u = `${t}.sections[${c}]`;
+function v({ node: t, nodePath: i, idSet: s, validTags: e, errors: n }) {
+  if (t.tag === "arcgis-nav-card") {
+    const o = t.properties;
+    o && typeof o == "object" && Array.isArray(o.sections) && o.sections.forEach((r, c) => {
+      const u = `${i}.sections[${c}]`;
       v({
-        node: a,
+        node: r,
         nodePath: u,
-        idSet: e,
+        idSet: s,
         validTags: ["arcgis-layout-section"],
-        errors: o
+        errors: n
       });
     });
   }
-  o.push(...J(i, t, e, s)), Array.isArray(i.children) && i.children.forEach((n, r) => {
-    let a = `${t}.Child[${r}]`, c = Array.from(x);
-    w(i) ? (c = ["arcgis-layout-row"], a = `${t}.Row[${r}]`) : E(i) ? (c = ["arcgis-layout-column"], a = `${t}.Column[${r}]`) : $(i) && (c = Array.from(x).filter(
+  n.push(...K(t, i, s, e)), Array.isArray(t.children) && t.children.forEach((o, a) => {
+    let r = `${i}.Child[${a}]`, c = Array.from(x);
+    w(t) ? (c = ["arcgis-layout-row"], r = `${i}.Row[${a}]`) : N(t) ? (c = ["arcgis-layout-column"], r = `${i}.Column[${a}]`) : C(t) && (c = Array.from(x).filter(
       (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
     )), v({
-      node: n,
-      nodePath: a,
-      idSet: e,
+      node: o,
+      nodePath: r,
+      idSet: s,
       validTags: c,
-      errors: o
+      errors: n
     });
   });
 }
-function K(i) {
-  const t = [], e = /* @__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((s, o) => {
-    if (F(s))
+function Q(t) {
+  const i = [], s = /* @__PURE__ */ new Set();
+  return t ? typeof t != "object" ? (i.push("Layout must be an object."), i) : !t.sections.length || !Array.isArray(t.sections) ? (i.push("Layout must have a sections array."), i) : (t.sections.forEach((e, n) => {
+    if (F(e))
       return;
-    const n = s, r = `Section[${o}]`;
+    const o = e, a = `Section[${n}]`;
     v({
-      node: n,
-      nodePath: r,
-      idSet: e,
+      node: o,
+      nodePath: a,
+      idSet: s,
       validTags: ["arcgis-layout-section"],
-      errors: t
+      errors: i
     });
-  }), t) : (t.push("Layout must be defined."), t);
+  }), i) : (i.push("Layout must be defined."), i);
 }
-async function Q(i) {
-  switch (i) {
+async function Z(t) {
+  switch (t) {
     case "arcgis-text-card":
       return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
     // ...other cases...
     default:
-      return ((t) => t);
+      return ((i) => i);
   }
 }
-function Z(i) {
-  const t = f(i);
-  return t.schemaVersion = 2, t;
+function ii(t) {
+  const i = f(t);
+  return i.schemaVersion = 2, i;
 }
-const tt = {
-  2: Z
+const ti = {
+  2: ii
 };
-async function it(i) {
-  const t = q(i, tt), e = await Promise.all(
-    t.sections.map(async (s) => await k(s))
+async function ei(t) {
+  const i = q(t, ti), s = await Promise.all(
+    i.sections.map(async (e) => await P(e))
   );
-  return t.sections = e, t;
+  return i.sections = s, i;
 }
-async function k(i) {
-  const e = (await Q(i.tag))(i);
-  return Array.isArray(e.children) && (e.children = await Promise.all(
-    e.children.map(async (s) => await k(s))
-  )), e;
+async function P(t) {
+  const s = (await Z(t.tag))(t);
+  return Array.isArray(s.children) && (s.children = await Promise.all(
+    s.children.map(async (e) => await P(e))
+  )), s;
 }
-function et(i, t) {
-  if (i.children && t < i.children.length - 1)
-    return i.children[t + 1];
+function si(t, i) {
+  if (t.children && i < t.children.length - 1)
+    return t.children[i + 1];
 }
-function st(i, t) {
-  if (i.children && t > 0)
-    return i.children[t - 1];
+function oi(t, i) {
+  if (t.children && i > 0)
+    return t.children[i - 1];
 }
-function ot(i, t) {
-  if (t < i.sections.length - 1)
-    return i.sections[t + 1];
+function ni(t, i) {
+  if (i < t.sections.length - 1)
+    return t.sections[i + 1];
 }
-function nt(i, t) {
-  if (t > 0)
-    return i.sections[t - 1];
+function ai(t, i) {
+  if (i > 0)
+    return t.sections[i - 1];
 }
-function at(i, t) {
-  const e = f(t);
-  function s(o) {
-    for (let n = 0; n < o.sections.length; n++) {
-      const r = o.sections[n];
-      if (r.children)
-        for (let a = 0; a < r.children.length; a++) {
-          const c = r.children[a];
+function ri(t, i) {
+  const s = f(i);
+  function e(n) {
+    for (let o = 0; o < n.sections.length; o++) {
+      const a = n.sections[o];
+      if (a.children)
+        for (let r = 0; r < a.children.length; r++) {
+          const c = a.children[r];
           if (c.children)
             for (let u = 0; u < c.children.length; u++) {
               const d = c.children[u];
               if (d.children)
                 for (let l = 0; l < d.children.length; l++) {
                   const g = d.children[l];
-                  if (g.id === i.id)
+                  if (g.id === t.id)
                     if (l > 0) {
                       const h = d.children[l - 1];
                       return d.children[l - 1] = d.children[l], d.children[l] = h, !0;
                     } else {
                       if (u > 0)
-                        return d.children.splice(l, 1), c.children[u - 1].children?.push(i), !0;
-                      if (a > 0) {
+                        return d.children.splice(l, 1), c.children[u - 1].children?.push(t), !0;
+                      if (r > 0) {
                         d.children.splice(l, 1);
-                        const h = st(r, a);
+                        const h = oi(a, r);
                         if (h?.children && h.children.length > 0)
-                          return h.children[h.children.length - 1].children?.push(i), !0;
-                      } else if (n > 0) {
+                          return h.children[h.children.length - 1].children?.push(t), !0;
+                      } else if (o > 0) {
                         d.children.splice(l, 1);
-                        const h = nt(o, n);
+                        const h = ai(n, o);
                         if (h?.children && h.children.length > 0) {
-                          const _ = h.children[h.children.length - 1];
-                          if (_.children && _.children.length > 0)
-                            return _.children[_.children.length - 1].children?.push(i), !0;
+                          const p = h.children[h.children.length - 1];
+                          if (p.children && p.children.length > 0)
+                            return p.children[p.children.length - 1].children?.push(t), !0;
                         }
                       }
                     }
                   if (g.tag === "arcgis-nav-card") {
                     const h = g.properties?.sections;
-                    if (h && s({ sections: h }))
+                    if (h && e({ sections: h }))
                       return !0;
                   }
-                  if (g.children && E(g) && s({ sections: [{ children: [g] }] }))
+                  if (g.children && N(g) && e({ sections: [{ children: [g] }] }))
                     return !0;
                 }
             }
@@ -165,50 +165,50 @@ function at(i, t) {
     }
     return !1;
   }
-  return s(e), e;
+  return e(s), s;
 }
-function ht(i, t) {
-  const e = f(t);
-  function s(o) {
-    for (let n = 0; n < o.sections.length; n++) {
-      const r = o.sections[n];
-      if (r.children)
-        for (let a = 0; a < r.children.length; a++) {
-          const c = r.children[a];
+function hi(t, i) {
+  const s = f(i);
+  function e(n) {
+    for (let o = 0; o < n.sections.length; o++) {
+      const a = n.sections[o];
+      if (a.children)
+        for (let r = 0; r < a.children.length; r++) {
+          const c = a.children[r];
           if (c.children)
             for (let u = 0; u < c.children.length; u++) {
               const d = c.children[u];
               if (d.children)
                 for (let l = 0; l < d.children.length; l++) {
                   const g = d.children[l];
-                  if (g.id === i.id)
+                  if (g.id === t.id)
                     if (l < d.children.length - 1) {
                       const h = d.children[l + 1];
                       return d.children[l + 1] = d.children[l], d.children[l] = h, !0;
                     } else {
                       if (u < c.children.length - 1)
-                        return d.children.splice(l, 1), c.children[u + 1].children?.unshift(i), !0;
-                      if (a < r.children.length - 1) {
+                        return d.children.splice(l, 1), c.children[u + 1].children?.unshift(t), !0;
+                      if (r < a.children.length - 1) {
                         d.children.splice(l, 1);
-                        const h = et(r, a);
+                        const h = si(a, r);
                         if (h?.children && h.children.length > 0)
-                          return h.children[0].children?.unshift(i), !0;
-                      } else if (n < o.sections.length - 1) {
+                          return h.children[0].children?.unshift(t), !0;
+                      } else if (o < n.sections.length - 1) {
                         d.children.splice(l, 1);
-                        const h = ot(o, n);
+                        const h = ni(n, o);
                         if (h?.children && h.children.length > 0) {
-                          const _ = h.children[0];
-                          if (_.children && _.children.length > 0)
-                            return _.children[0].children?.unshift(i), !0;
+                          const p = h.children[0];
+                          if (p.children && p.children.length > 0)
+                            return p.children[0].children?.unshift(t), !0;
                         }
                       }
                     }
                   if (g.tag === "arcgis-nav-card") {
                     const h = g.properties?.sections;
-                    if (h && s({ sections: h }))
+                    if (h && e({ sections: h }))
                       return !0;
                   }
-                  if (g.children && E(g) && s({ sections: [{ children: [g] }] }))
+                  if (g.children && N(g) && e({ sections: [{ children: [g] }] }))
                     return !0;
                 }
             }
@@ -216,48 +216,53 @@ function ht(i, t) {
     }
     return !1;
   }
-  return s(e), e;
+  return e(s), s;
 }
-function rt(i, t) {
-  const e = [];
-  function s(o) {
-    if (o.nodeType === Node.ELEMENT_NODE) {
-      const n = o;
-      n.matches(t) && e.push(n);
-      const r = n.shadowRoot;
-      r && s(r);
-      for (const a of Array.from(n.children))
-        s(a);
-    } else if (o instanceof ShadowRoot)
-      for (const n of Array.from(o.children))
-        s(n);
-  }
-  return s(i), e;
+function li(t, i) {
+  const s = [];
+  function e(n) {
+    if (n.nodeType === Node.ELEMENT_NODE) {
+      const o = n;
+      o.matches(i) && s.push(o);
+      const a = o.shadowRoot;
+      a && e(a);
+      for (const r of Array.from(o.children))
+        e(r);
+    } else if (n instanceof ShadowRoot)
+      for (const o of Array.from(n.children))
+        e(o);
+  }
+  return e(t), s;
 }
-class lt extends P {
+class di extends k {
   constructor() {
-    super(), this._messages = G({ blocking: !0 }), this.#i = I({ context: M }), this.#t = !1, this._layoutRef = L(), this._nodeControlsEl = L(), this._initShell = () => {
-      const t = this.el;
-      t.style.setProperty("--offsetTop", `${t.offsetTop}px`);
-    }, this._layoutNodeEditor = L(), this._handleExitEditMode = async (t) => {
-      t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
-    }, this._handlePublishLayout = async (t) => {
-      t.stopPropagation(), this.arcgisHubLayoutPublished.emit(this._layout);
-    }, this._handleCloseEditPanel = () => {
-      this._isEditPanelOpen = !1;
-      const t = this._layoutNodeEditorConfig?.layoutNodeConfig?.name || "unknown", e = {
-        ...X.category.interaction.action.close.label.sidePanel,
-        details: t
-      };
-      this.hubTelemetry.emit(e);
-    }, 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 = N(), this.arcgisHubLayoutEditorExit = N(), this.arcgisHubLayoutPublished = N(), this.hubTelemetry = N(), 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) => {
-      await this._handleLayoutAddNode(t);
-    }), this.listen("arcgisLayoutNodeReposition", async (t) => {
-      await this._handleLayoutRepositionNode(t);
+    super(), this._messages = G({ blocking: !0 }), this.#t = R({ context: M }), this.#i = !1, this._isNodeDirty = !1, this._layoutRef = L(), this._nodeControlsRef = L(), this._layoutNodeEditorRef = L(), this._handleExitEditMode = async (i) => {
+      i.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
+    }, this._handlePublishLayout = async (i) => {
+      i.stopPropagation(), this.arcgisHubLayoutPublished.emit({
+        layout: this._layout,
+        successCallback: () => {
+          this._isLayoutDirty = !1;
+        }
+      });
+    }, this._handleCloseEditPanel = async () => {
+      if (this._isNodeDirty && !this._isLayoutValid) {
+        if (!window.confirm(this._messages.invalidDirtyStateMessage))
+          return;
+        await this._updateLayoutNode(this._nodeBeforeEdit.id, "properties", this._nodeBeforeEdit.properties, !0);
+      }
+      this._isEditPanelOpen = !1, this._nodeBeforeEdit = void 0, this.hubTelemetry.emit({
+        ...Y.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 (i) => {
+      await this._handleLayoutNodeEditorChange(i);
+    }), this.listen("arcgisLayoutNodeVisibilityChange", async (i) => {
+      await this._handleLayoutNodeVisibilityChange(i);
+    }), this.listen("arcgisLayoutNodeHighlight", (i) => this._handleNodeHighlight(i)), this.listen("arcgisLayoutNodeUnHighlight", (i) => this._handleNodeUnHighlight(i)), this.listen("arcgisLayoutNodeEditorOpen", this._handleLayoutNodeEditorOpen), this.listen("arcgisLayoutAddNode", async (i) => {
+      await this._handleLayoutAddNode(i);
+    }), this.listen("arcgisLayoutNodeReposition", async (i) => {
+      await this._handleLayoutRepositionNode(i);
     }), this.listenOn(window, "resize", this._initShell);
   }
   static {
@@ -267,127 +272,138 @@ class lt extends P {
     this.shadowRootOptions = T;
   }
   static {
-    this.styles = Y;
+    this.styles = W;
   }
   get _context() {
-    return j();
+    return B();
   }
-  #i;
   #t;
+  #i;
   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 && rt(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((s) => {
-      s.lazy = !1;
-    })), (!this.hasUpdated || t.has("_processedLayout")) && this.#i.setValue({ messages: this._messages, layout: this._processedLayout });
+  willUpdate(i) {
+    (i.has("layout") || i.has("options")) && this._init(), this.hasUpdated && i.has("isEditMode") && (this._highlightedElement = void 0, this._highlightedNode = void 0, this._layoutNodeEditorConfig = void 0, this.updateEditModeAnnouncement(), this.isEditMode && li(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((e) => {
+      e.lazy = !1;
+    })), (!this.hasUpdated || i.has("_processedLayout")) && this.#t.setValue({ messages: this._messages, layout: this._processedLayout });
+  }
+  _initShell() {
+    const i = this.el;
+    i.style.setProperty("--offsetTop", `${i.offsetTop}px`);
+  }
+  async _init() {
+    const i = await ei(this.layout);
+    this._layout = f(i), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
   }
   async getUpdateComplete() {
-    const t = await super.getUpdateComplete();
-    return await this._layoutRef.value?.updateComplete, await new Promise((e) => setTimeout(e, 150)), t;
+    const i = await super.getUpdateComplete();
+    return await this._layoutRef.value?.updateComplete, await new Promise((s) => setTimeout(s, 150)), i;
   }
   suspendSelection() {
-    this.#t = !0;
+    this.#i = !0;
   }
   resumeSelection() {
-    this.#t = !1;
+    this.#i = !1;
   }
   async updateEditModeAnnouncement() {
     this._liveAnnouncement = "";
-    const t = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
-    await this.updateComplete, this._liveAnnouncement = t;
+    const i = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
+    await this.updateComplete, this._liveAnnouncement = i;
   }
-  async _init() {
-    const t = await it(this.layout);
-    this._layout = f(t), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
+  async _updateLayoutNode(i, s, e, n, o) {
+    const a = f(this._layout), r = m(a, i);
+    r && (O(s, e, r), this._layout = a, this._processedLayout = await this._validateAndProcess(a, this.options), this._highlightedNode = m(this._processedLayout, i), 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 _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: e, id: s, values: o, valid: n } = t.detail, r = f(this._layout), a = m(r, s);
+  async _handleLayoutNodeEditorChange(i) {
+    const { layoutNodeConfig: s, id: e, values: n, valid: o } = i.detail, a = m(this._layout, e);
     if (a) {
-      const c = S(e, "editor.valuesOutCallback") || ((u) => u);
-      a.properties = V(a.properties, c(o)), this._layout = r, this._processedLayout = await this._validateAndProcess(r, this.options), this._highlightedNode = m(this._processedLayout, s), 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._isLayoutValid = n, this.arcgisHubLayoutChanged.emit();
+      const r = S(s, "editor.valuesOutCallback") || ((c) => c);
+      a.properties = V(a.properties, r(n)), await this._updateLayoutNode(e, "properties", a.properties, o, () => {
+        this.arcgisHubLayoutChanged.emit();
+      });
     }
   }
-  async _handleLayoutNodeVisibilityChange(t) {
-    const { id: e } = t.detail, s = f(this._layout), o = m(s, e);
-    o && (o.visibility || (o.visibility = { kind: "static", isHidden: !1 }), o.visibility.kind === "static" && (o.visibility.isHidden = !o.visibility.isHidden), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), this._highlightedNode = m(this._processedLayout, e), 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 _handleLayoutNodeVisibilityChange(i) {
+    const { id: s } = i.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, () => {
+      this.arcgisHubLayoutChanged.emit();
+    }));
   }
-  async _validateAndProcess(t, e) {
-    const s = K(t);
-    return this._layoutErrors = s, s.length > 0 && !this.debug && y.error("Layout validation errors:", s), await z(t, e, this._context);
+  async _validateAndProcess(i, s) {
+    const e = Q(i);
+    return this._layoutErrors = e, e.length > 0 && !this.debug && y.error("Layout validation errors:", e), await z(i, s, this._context);
   }
-  hitTest(t) {
-    let e = !1;
+  hitTest(i) {
+    let s = !1;
     if (this._highlightedElement) {
-      const s = this._highlightedElement.getBoundingClientRect();
-      t.clientX >= s.left && t.clientX <= s.right && t.clientY >= s.top && t.clientY <= s.bottom && (e = !0);
+      const e = this._highlightedElement.getBoundingClientRect();
+      i.clientX >= e.left && i.clientX <= e.right && i.clientY >= e.top && i.clientY <= e.bottom && (s = !0);
     }
-    return e;
+    return s;
   }
-  _handleNodeHighlight(t) {
-    if (t.stopPropagation(), this.#t)
+  _handleNodeHighlight(i) {
+    if (i.stopPropagation(), this.#i)
       return;
-    y.debug("NODE HIGHLIGHT EVENT >>>", t);
-    const e = t.detail.target, s = e.dataset.nodeId || "";
-    if (s) {
-      const o = m(this._processedLayout, s);
-      o ? this._highlightedNode !== o && this._highlightedElement !== e && (this._highlightedNode = o, this._highlightedElement = e) : y.warn(`No node found for target with id ${s}`);
+    y.debug("NODE HIGHLIGHT EVENT >>>", i);
+    const s = i.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}`);
     }
   }
-  _handleNodeUnHighlight(t) {
-    t.stopPropagation(), !this.#t && (y.debug("NODE UNHIGHLIGHT EVENT >>>", t), !this._nodeControlsEl.value?.matches(":hover") && // this._highlightedElement === referenceElement &&
-    !this.hitTest(t.detail) && (this._highlightedNode = void 0, this._highlightedElement = void 0));
+  _handleNodeUnHighlight(i) {
+    i.stopPropagation(), !this.#i && (y.debug("NODE UNHIGHLIGHT EVENT >>>", i), !this._nodeControlsRef.value?.matches(":hover") && !this.hitTest(i.detail) && (this._highlightedNode = void 0, this._highlightedElement = void 0));
   }
-  _handleNodeControlsMouseOut(t) {
-    this.#t || this.hitTest(t) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
+  _handleNodeControlsMouseOut(i) {
+    this.#i || this.hitTest(i) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
   }
-  _handleLayoutNodeEditorOpen(t) {
+  _handleLayoutNodeEditorOpen(i) {
     if (!this._highlightedElement || !this._highlightedNode)
       return;
     this._isEditPanelOpen = !0;
-    let e = R(this._highlightedElement, this._highlightedNode);
-    e && (e = H(this._messages, e)), this._layoutNodeEditorConfig = {
-      layoutNodeConfig: f(e),
+    let s = I(this._highlightedElement, this._highlightedNode);
+    s && (s = H(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 e = f(this._layout), { column: s, index: o } = B(t.detail.adjacentNode, e);
-    y.debug("Found column and index:", s, o);
-    const n = {
-      id: D(),
-      tag: t.detail.config.tag,
-      properties: t.detail.config.defaults
+  async _handleLayoutAddNode(i) {
+    y.debug("Add node event:", i.detail.config.tag);
+    const s = f(this._layout), { column: e, index: n } = X(i.detail.adjacentNode, s);
+    y.debug("Found column and index:", e, n);
+    const o = {
+      id: U(),
+      tag: i.detail.config.tag,
+      properties: i.detail.config.defaults
     };
-    s.children?.splice(o + 1, 0, n), this._layout = e, this._processedLayout = await this._validateAndProcess(e, this.options), this._highlightedNode = n, await this.updateComplete, this._highlightedElement = await this._layoutRef.value?.getCardEl(n.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(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(), i.detail.config.telemetry && this.hubTelemetry.emit(i.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 = at(t.detail.node, this._layout)) : (y.debug("Moving node down..."), this._layout = ht(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(() => {
+  async _handleLayoutRepositionNode(i) {
+    y.debug("Reposition node event:", i.detail.node.id, i.detail.direction), i.detail.direction === "up" ? (y.debug("Moving node up..."), this._layout = ri(i.detail.node, this._layout)) : (y.debug("Moving node down..."), this._layout = hi(i.detail.node, this._layout)), this.suspendSelection(), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._highlightedNode = i.detail.node, await this.updateComplete, this._highlightedElement = await this._layoutRef.value?.getCardEl(i.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();
   }
   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;
+    let i;
+    return this.isEditMode && (i = _`<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>`), i;
   }
   renderNodeControls() {
-    let t;
-    return this.isEditMode && this._highlightedElement && this._highlightedNode && (t = p`<arcgis-layout-node-controls .layoutNodeEditorRef=${this._layoutNodeEditor.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._nodeControlsEl)}></arcgis-layout-node-controls>`), t;
+    let i;
+    return this.isEditMode && this._highlightedElement && this._highlightedNode && (i = _`<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>`), i;
   }
   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" .disabled=${!this._isLayoutValid} icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${C(t.layoutNode.id, p`<arcgis-layout-node-editor .layoutNodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode} ${b(this._layoutNodeEditor)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
+      const i = this._layoutNodeEditorConfig;
+      if (i?.layoutNodeConfig?.editor)
+        return _`<calcite-shell-panel position=end slot=panel-end><calcite-panel .heading=${j(i.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>${$(i.layoutNode.id, _`<arcgis-layout-node-editor .layoutNodeConfig=${i.layoutNodeConfig} .node=${i.layoutNode} ${b(this._layoutNodeEditorRef)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
     }
     return null;
   }
   render() {
-    return p`<calcite-shell>${C("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 _`<calcite-shell>${$("aria-live-region", _`<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>`;
   }
 }
-A("arcgis-layout-container", lt);
+A("arcgis-layout-container", di);
 export {
-  lt as ArcgisLayoutContainer
+  di as ArcgisLayoutContainer
 };