@esri/hub-web-components 0.14.0 → 0.16.0

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

@@ -1,80 +1,80 @@
-import { c as w } from "../../chunks/runtime.js";
-import { html as c } from "lit-html";
-import { keyed as b } from "lit-html/directives/keyed.js";
-import { LitElement as x, useContextProvider as P, createEvent as y, noShadowRoot as A } from "@arcgis/lumina";
-import { createRef as _, ref as p } from "lit/directives/ref.js";
-import { l as S } from "../../chunks/messagesContext.js";
-import { css as k } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as $, cloneObject as l, getProp as v, Logger as u, createId as T, getWithDefault as H } from "@esri/hub-common";
-import { g as M } from "../../chunks/state.js";
-import { f as g, p as I } from "../../chunks/processLayout.js";
-import { c as O, b as N, i as f, a as L } from "../../chunks/typeGuards.js";
-import { g as V, i as R } from "../../chunks/interpolate-translations.js";
-import { u as D } from "../../chunks/useT9n.js";
-import { migrateSchema as j } from "@esri/hub-components";
-import { dictionary as U } from "@esri/telemetry-dictionary-hub";
+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 T, createEvent as N, noShadowRoot as I } 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 S, cloneObject as f, getProp as x, 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 { 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 { 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.14/esri/copyright.txt for details.
-v0.14.0 */
-const G = k`@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 F(i, t) {
-  const s = ["order", "offset", "width"], o = [];
-  return s.forEach((e) => {
-    let a;
-    N(i) && (a = i.sectionProps?.[e]), f(i) && (a = i.rowProps?.[e]), L(i) && (a = i.columnProps?.[e]), typeof a == "number" ? (a < 0 || a > 12) && o.push(`Node "${i.id}": ${t} > ${e} out of range (0-12): ${a}`) : typeof a == "object" && Object.entries(a).forEach(([n, h]) => {
-      typeof h == "number" && (h < 0 || h > 12) && o.push(`Node "${i.id}": ${t} > ${e}.${n} out of range (0-12): ${h}`);
+See https://js.arcgis.com/0.16/esri/copyright.txt for details.
+v0.16.0 */
+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}`);
     });
-  }), o;
+  }), s;
 }
-function q(i, t, s, o) {
-  const e = [];
-  return i.id || e.push(`${t} > missing required id.`), i.tag || e.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && e.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), o.includes(i.tag) || e.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), e.push(...F(i, t)), (N(i) || f(i) || L(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && e.push(`Node "${i.id}": ${t} > missing or empty children array.`), 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 m({ node: i, nodePath: t, idSet: s, validTags: o, errors: e }) {
+function v({ node: i, nodePath: t, idSet: e, validTags: s, errors: o }) {
   if (i.tag === "arcgis-nav-card") {
-    const a = i.properties;
-    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((h, r) => {
-      const d = `${t}.sections[${r}]`;
-      m({
-        node: h,
-        nodePath: d,
-        idSet: s,
+    const n = i.properties;
+    n && typeof n == "object" && Array.isArray(n.sections) && n.sections.forEach((a, c) => {
+      const u = `${t}.sections[${c}]`;
+      v({
+        node: a,
+        nodePath: u,
+        idSet: e,
         validTags: ["arcgis-layout-section"],
-        errors: e
+        errors: o
       });
     });
   }
-  e.push(...q(i, t, s, o)), Array.isArray(i.children) && i.children.forEach((a, n) => {
-    let h = `${t}.Child[${n}]`, r = Array.from($);
-    N(i) ? (r = ["arcgis-layout-row"], h = `${t}.Row[${n}]`) : f(i) ? (r = ["arcgis-layout-column"], h = `${t}.Column[${n}]`) : L(i) && (r = Array.from($).filter(
-      (d) => d !== "arcgis-layout-column" && d !== "arcgis-layout-section"
-    )), m({
-      node: a,
-      nodePath: h,
-      idSet: s,
-      validTags: r,
-      errors: e
+  o.push(...J(i, t, e, s)), Array.isArray(i.children) && i.children.forEach((n, r) => {
+    let a = `${t}.Child[${r}]`, c = Array.from(S);
+    w(i) ? (c = ["arcgis-layout-row"], a = `${t}.Row[${r}]`) : E(i) ? (c = ["arcgis-layout-column"], a = `${t}.Column[${r}]`) : $(i) && (c = Array.from(S).filter(
+      (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
+    )), v({
+      node: n,
+      nodePath: a,
+      idSet: e,
+      validTags: c,
+      errors: o
     });
   });
 }
-function z(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((o, e) => {
-    if (O(o)) {
-      t.push(`Section[${e}] is a reference and cannot be a direct child.`);
+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)) {
+      t.push(`Section[${o}] is a reference and cannot be a direct child.`);
       return;
     }
-    const a = o, n = `Section[${e}]`;
-    m({
-      node: a,
-      nodePath: n,
-      idSet: s,
+    const n = s, r = `Section[${o}]`;
+    v({
+      node: n,
+      nodePath: r,
+      idSet: e,
       validTags: ["arcgis-layout-section"],
       errors: t
     });
   }), t) : (t.push("Layout must be defined."), t);
 }
-async function B(i) {
+async function Q(i) {
   switch (i) {
     case "arcgis-text-card":
       return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
@@ -83,187 +83,313 @@ async function B(i) {
       return ((t) => t);
   }
 }
-function X(i) {
-  const t = l(i);
+function Z(i) {
+  const t = f(i);
   return t.schemaVersion = 2, t;
 }
-const Y = {
-  2: X
+const tt = {
+  2: Z
 };
-async function W(i) {
-  const t = j(i, Y), s = await Promise.all(
-    t.sections.map(async (o) => await C(o))
+async function it(i) {
+  const t = q(i, tt), e = await Promise.all(
+    t.sections.map(async (s) => await k(s))
   );
-  return t.sections = s, t;
+  return t.sections = e, t;
+}
+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;
+}
+function et(i, t) {
+  if (i.children && t < i.children.length - 1)
+    return i.children[t + 1];
+}
+function st(i, t) {
+  if (i.children && t > 0)
+    return i.children[t - 1];
+}
+function ot(i, t) {
+  if (t < i.sections.length - 1)
+    return i.sections[t + 1];
 }
-async function C(i) {
-  const s = (await B(i.tag))(i);
-  return Array.isArray(s.children) && (s.children = await Promise.all(
-    s.children.map(async (o) => await C(o))
-  )), s;
+function nt(i, t) {
+  if (t > 0)
+    return i.sections[t - 1];
 }
-function E(i, t) {
-  if (!(!t.sections || t.sections.length === 0)) {
-    for (const s of t.sections)
-      if (s.children) {
-        for (const o of s.children)
-          if (o.children) {
-            for (const e of o.children)
-              if (e.children)
-                for (let a = 0; a < e.children.length; a++) {
-                  const n = e.children[a];
-                  if (n.id === i.id)
-                    return { column: e, index: a };
-                  if (n.tag === "arcgis-nav-card") {
-                    const h = n.properties?.sections, r = E(i, {
-                      sections: h || []
-                    });
-                    if (r)
-                      return r;
+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];
+          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 (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) {
+                        d.children.splice(l, 1);
+                        const h = st(r, a);
+                        if (h?.children && h.children.length > 0)
+                          return h.children[h.children.length - 1].children?.push(i), !0;
+                      } else if (n > 0) {
+                        d.children.splice(l, 1);
+                        const h = nt(o, n);
+                        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;
+                        }
+                      }
+                    }
+                  if (g.tag === "arcgis-nav-card") {
+                    const h = g.properties?.sections;
+                    if (h && s({ sections: h }))
+                      return !0;
                   }
-                  if (f(n) && n.children) {
-                    const h = E(i, {
-                      sections: [{ children: [n] }]
-                    });
-                    if (h)
-                      return h;
+                  if (g.children && E(g) && s({ sections: [{ children: [g] }] }))
+                    return !0;
+                }
+            }
+        }
+    }
+    return !1;
+  }
+  return s(e), e;
+}
+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];
+          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 (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) {
+                        d.children.splice(l, 1);
+                        const h = et(r, a);
+                        if (h?.children && h.children.length > 0)
+                          return h.children[0].children?.unshift(i), !0;
+                      } else if (n < o.sections.length - 1) {
+                        d.children.splice(l, 1);
+                        const h = ot(o, n);
+                        if (h?.children && h.children.length > 0) {
+                          const _ = h.children[0];
+                          if (_.children && _.children.length > 0)
+                            return _.children[0].children?.unshift(i), !0;
+                        }
+                      }
+                    }
+                  if (g.tag === "arcgis-nav-card") {
+                    const h = g.properties?.sections;
+                    if (h && s({ sections: h }))
+                      return !0;
                   }
+                  if (g.children && E(g) && s({ sections: [{ children: [g] }] }))
+                    return !0;
                 }
-          }
-      }
+            }
+        }
+    }
+    return !1;
+  }
+  return s(e), e;
+}
+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;
 }
-class J extends x {
+class lt extends P {
   constructor() {
-    super(), this._messages = D({ blocking: !0 }), this.#t = P({ context: S }), this._layoutRef = _(), this._nodeControlsEl = _(), this._initShell = () => {
+    super(), this._messages = G({ blocking: !0 }), this.#i = T({ 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 = _(), this._handleExitEditMode = async (t) => {
+    }, 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", s = {
-        ...U.category.interaction.action.close.label.sidePanel,
+      const t = this._layoutNodeEditorConfig?.layoutNodeConfig?.name || "unknown", e = {
+        ...X.category.interaction.action.close.label.sidePanel,
         details: t
       };
-      this.hubTelemetry.emit(s);
-    }, 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 = y(), this.arcgisHubLayoutEditorExit = y(), this.arcgisHubLayoutPublished = y(), this.hubTelemetry = y(), 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.listenOn(window, "resize", this._initShell);
+      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);
+    }), 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 };
   }
   static {
-    this.shadowRootOptions = A;
+    this.shadowRootOptions = I;
   }
   static {
-    this.styles = G;
+    this.styles = Y;
   }
   get _context() {
-    return M();
+    return j();
   }
+  #i;
   #t;
   connectedCallback() {
     super.connectedCallback(), this._initShell();
   }
   willUpdate(t) {
-    (t.has("layout") || t.has("options")) && this._init(), this.hasUpdated && t.has("isEditMode") && this.updateEditModeAnnouncement();
+    (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 });
   }
-  loaded() {
-    this.#t.setValue(this._messages);
+  async getUpdateComplete() {
+    const t = await super.getUpdateComplete();
+    return await this._layoutRef.value?.updateComplete, await new Promise((e) => setTimeout(e, 150)), t;
   }
-  updateEditModeAnnouncement() {
+  suspendSelection() {
+    this.#t = !0;
+  }
+  resumeSelection() {
+    this.#t = !1;
+  }
+  async updateEditModeAnnouncement() {
     this._liveAnnouncement = "";
     const t = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
-    setTimeout(() => {
-      this._liveAnnouncement = t;
-    }, 250);
+    await this.updateComplete, this._liveAnnouncement = t;
   }
   async _init() {
-    const t = await W(this.layout);
-    this._layout = l(t), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
+    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 _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: s, id: o, values: e, valid: a } = t.detail, n = l(this._layout), h = g(n, o);
-    if (h) {
-      const r = v(s, "editor.valuesOutCallback") || ((d) => d);
-      h.properties = r(e), this._layout = n, this._processedLayout = await this._validateAndProcess(n, this.options), this._highlightedNode = g(this._processedLayout, o), 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 = a, this.arcgisHubLayoutChanged.emit();
+    const { layoutNodeConfig: e, id: s, values: o, valid: n } = t.detail, r = f(this._layout), a = m(r, s);
+    if (a) {
+      const c = x(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();
     }
   }
   async _handleLayoutNodeVisibilityChange(t) {
-    const { id: s } = t.detail, o = l(this._layout), e = g(o, s);
-    e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && (e.visibility.isHidden = !e.visibility.isHidden), this._layout = o, this._processedLayout = await this._validateAndProcess(o, this.options), this._highlightedNode = g(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.arcgisHubLayoutChanged.emit());
+    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 _validateAndProcess(t, s) {
-    const o = z(t);
-    return this._layoutErrors = o, o.length > 0 && !this.debug && u.error("Layout validation errors:", o), await I(t, s, this._context);
+  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);
   }
   hitTest(t) {
-    let s = !1;
+    let e = !1;
     if (this._highlightedElement) {
-      const o = this._highlightedElement.getBoundingClientRect();
-      t.clientX >= o.left && t.clientX <= o.right && t.clientY >= o.top && t.clientY <= o.bottom && (s = !0);
+      const s = this._highlightedElement.getBoundingClientRect();
+      t.clientX >= s.left && t.clientX <= s.right && t.clientY >= s.top && t.clientY <= s.bottom && (e = !0);
     }
-    return s;
+    return e;
   }
   _handleNodeHighlight(t) {
-    t.stopPropagation(), u.debug("NODE HIGHLIGHT EVENT >>>", t);
-    const s = t.detail.target, o = s.dataset.nodeId || "";
-    if (o) {
-      const e = g(this._processedLayout, o);
-      e ? this._highlightedNode !== e && this._highlightedElement !== s && (this._highlightedNode = e, this._highlightedElement = s) : u.warn(`No node found for target with id ${o}`);
+    if (t.stopPropagation(), this.#t)
+      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}`);
     }
   }
   _handleNodeUnHighlight(t) {
-    t.stopPropagation(), u.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);
+    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));
   }
   _handleNodeControlsMouseOut(t) {
-    this.hitTest(t) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
+    this.#t || this.hitTest(t) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
   }
-  _handleLayoutNodeEditorOpen() {
+  _handleLayoutNodeEditorOpen(t) {
     if (!this._highlightedElement || !this._highlightedNode)
       return;
     this._isEditPanelOpen = !0;
-    let t = V(this._highlightedElement, this._highlightedNode);
-    t && (t = R(this._messages, t)), this._layoutNodeEditorConfig = {
-      layoutNodeConfig: l(t),
-      layoutNode: l(this._highlightedNode)
+    let e = R(this._highlightedElement, this._highlightedNode);
+    e && (e = H(this._messages, e)), this._layoutNodeEditorConfig = {
+      layoutNodeConfig: f(e),
+      layoutNode: f(this._highlightedNode)
     };
   }
   async _handleLayoutAddNode(t) {
-    u.debug("Add node event:", t.detail.config.tag);
-    const s = l(this._layout), { column: o, index: e } = E(t.detail.adjacentNode, s);
-    u.debug("Found column and index:", o, e);
-    const a = {
-      id: 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
     };
-    o.children?.splice(e + 1, 0, a), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), this._highlightedNode = a, await new Promise((n) => setTimeout(n, 250)), 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);
+    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);
+  }
+  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(() => {
+      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 = c`<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;
+    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 = c`<arcgis-layout-node-controls .layoutNodeEditorRef=${this._layoutNodeEditor.value} .isEditMode=${this.isEditMode} .isLayoutValid=${this._isLayoutValid} .messages=${this._messages} .node=${this._highlightedNode} @mouseout=${this._handleNodeControlsMouseOut} .referenceElement=${this._highlightedElement} style="position: absolute;" ${p(this._nodeControlsEl)}></arcgis-layout-node-controls>`), 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;
   }
   renderEditor() {
     if (this.isEditMode && this._isEditPanelOpen) {
       const t = this._layoutNodeEditorConfig;
       if (t?.layoutNodeConfig?.editor)
-        return c`<calcite-shell-panel position=end slot=panel-end><calcite-panel .heading=${H(t.layoutNodeConfig, "i18n.label", v(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>${b(t.layoutNode.id, c`<arcgis-layout-node-editor .layoutNodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode} ${p(this._layoutNodeEditor)}></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", x(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>`;
     }
     return null;
   }
   render() {
-    return c`<calcite-shell>${b("aria-live-region", c`<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} ${p(this._layoutRef)}></arcgis-layout></calcite-shell>`;
+    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>`;
   }
 }
-w("arcgis-layout-container", J);
+A("arcgis-layout-container", lt);
 export {
-  J as ArcgisLayoutContainer
+  lt as ArcgisLayoutContainer
 };

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

@@ -6,8 +6,8 @@ import { u as l } from "../../chunks/useT9n.js";
 import { focusElement as a } 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.14/esri/copyright.txt for details.
-v0.14.0 */
+See https://js.arcgis.com/0.16/esri/copyright.txt for details.
+v0.16.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.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { HTMLConfigurableLayoutNodeElement, ILayoutNodeChangeEventDetail, LayoutNode } from '@esri/hub-common';
+import { HTMLConfigurableLayoutNodeElement, ILayout, ILayoutNodeChangeEventDetail, LayoutNode } from '@esri/hub-common';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
 import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
+export interface ILayoutNodeRepositionEventDetail {
+    node: LayoutNode;
+    direction: "down" | "up";
+}
 
 /** @private */
 export declare class ArcgisLayoutNodeControls extends LitElement {
@@ -45,4 +49,5 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
      * editor (as opposed to simple toggle).
      */
     readonly arcgisLayoutNodeVisibilityChange: TargetedEvent<this, ILayoutNodeChangeEventDetail>;
+    readonly arcgisLayoutNodeReposition: TargetedEvent<this, ILayoutNodeRepositionEventDetail>;
 }