@esri/hub-web-components 0.26.2 → 0.28.0

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

@@ -1,24 +1,24 @@
-import { c as P } from "../../chunks/runtime.js";
+import { g as k, c as R } from "../../chunks/runtime.js";
 import { html as _ } from "lit-html";
 import { keyed as w } from "lit-html/directives/keyed.js";
-import { LitElement as R, useContextProvider as D, createEvent as L, noShadowRoot as I } from "@arcgis/lumina";
+import { LitElement as D, useContextProvider as I, createEvent as L, noShadowRoot as T } from "@arcgis/lumina";
 import { createRef as C, ref as $ } from "lit/directives/ref.js";
-import { l as T } from "../../chunks/layoutContext.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as x, cloneObject as f, setProp as V, getProp as S, deepMerge as O, Logger as p, createId as H, getWithDefault as j } from "@esri/hub-common";
-import { g as U } from "../../chunks/state.js";
-import { f as m, p as z } from "../../chunks/processLayout.js";
-import { c as B, b, i as v, a as E } from "../../chunks/typeGuards.js";
-import { g as F, i as q } from "../../chunks/interpolate-translations.js";
-import { u as G } from "../../chunks/useT9n.js";
-import { migrateSchema as W } from "@esri/hub-components";
-import { f as A } from "../../chunks/findColumnAndNodeIndex.js";
-import { dictionary as J } from "@esri/telemetry-dictionary-hub";
+import { l as M } from "../../chunks/layoutContext.js";
+import { css as V } from "@lit/reactive-element/css-tag.js";
+import { layoutNodeTags as x, cloneObject as f, setProp as O, getProp as H, deepMerge as j, Logger as p, createId as U, getWithDefault as z } from "@esri/hub-common";
+import { g as B } from "../../chunks/state.js";
+import { f as m, p as F } from "../../chunks/processLayout.js";
+import { c as q, b, i as v, a as E } from "../../chunks/typeGuards.js";
+import { a as G, i as W } from "../../chunks/interpolate-translations.js";
+import { u as J } from "../../chunks/useT9n.js";
+import { migrateSchema as K } from "@esri/hub-components";
+import { f as S } from "../../chunks/findColumnAndNodeIndex.js";
+import { dictionary as A } from "@esri/telemetry-dictionary-hub";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.2 */
-const K = M`@layer{arcgis-layout-container{display:block;--offsetTop: 0px;calcite-shell{position:static;font-size:inherit}#arcgis-layout-container-edit-mode-live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}arcgis-layout-container[is-edit-mode]{height:calc(100vh - var(--offsetTop));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
-function Q(i, t) {
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.0 */
+const Q = V`@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 X(i, t) {
   const s = ["order", "offset", "width"], e = [];
   return s.forEach((a) => {
     let o;
@@ -27,9 +27,9 @@ function Q(i, t) {
     });
   }), e;
 }
-function X(i, t, s, e) {
+function Y(i, t, s, e) {
   const a = [];
-  return i.id || a.push(`${t} > missing required id.`), i.tag || a.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && a.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), e.includes(i.tag) || a.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), a.push(...Q(i, t)), (b(i) || v(i) || E(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && a.push(`Node "${i.id}": ${t} > missing or empty children array.`), a;
+  return i.id || a.push(`${t} > missing required id.`), i.tag || a.push(`${t} > missing required tag.`), i.id && (s.has(i.id) && a.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), s.add(i.id)), e.includes(i.tag) || a.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), a.push(...X(i, t)), (b(i) || v(i) || E(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && a.push(`Node "${i.id}": ${t} > missing or empty children array.`), a;
 }
 function N({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
   if (i.tag === "arcgis-nav-card") {
@@ -45,7 +45,7 @@ function N({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
       });
     });
   }
-  a.push(...X(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((o, n) => {
+  a.push(...Y(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((o, n) => {
     let r = `${t}.Child[${n}]`, l = Array.from(x);
     b(i) ? (l = ["arcgis-layout-row"], r = `${t}.Row[${n}]`) : v(i) ? (l = ["arcgis-layout-column"], r = `${t}.Column[${n}]`) : E(i) && (l = Array.from(x).filter(
       (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
@@ -58,10 +58,10 @@ function N({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
     });
   });
 }
-function Y(i) {
+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((e, a) => {
-    if (B(e))
+    if (q(e))
       return;
     const o = e, n = `Section[${a}]`;
     N({
@@ -73,7 +73,7 @@ function Y(i) {
     });
   }), t) : (t.push("Layout must be defined."), t);
 }
-async function Z(i) {
+async function tt(i) {
   switch (i) {
     case "arcgis-text-card":
       return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
@@ -82,42 +82,42 @@ async function Z(i) {
       return ((t) => t);
   }
 }
-function tt(i) {
+function it(i) {
   const t = f(i);
   return t.schemaVersion = 2, t;
 }
-const it = {
-  2: tt
+const et = {
+  2: it
 };
-async function et(i) {
-  const t = W(i, it), s = await Promise.all(
-    t.sections.map(async (e) => await k(e))
+async function st(i) {
+  const t = K(i, et), s = await Promise.all(
+    t.sections.map(async (e) => await P(e))
   );
   return t.sections = s, t;
 }
-async function k(i) {
-  const s = (await Z(i.tag))(i);
+async function P(i) {
+  const s = (await tt(i.tag))(i);
   return Array.isArray(s.children) && (s.children = await Promise.all(
-    s.children.map(async (e) => await k(e))
+    s.children.map(async (e) => await P(e))
   )), s;
 }
-function st(i, t) {
+function ot(i, t) {
   if (i.children && t < i.children.length - 1)
     return i.children[t + 1];
 }
-function ot(i, t) {
+function at(i, t) {
   if (i.children && t > 0)
     return i.children[t - 1];
 }
-function at(i, t) {
+function nt(i, t) {
   if (t < i.sections.length - 1)
     return i.sections[t + 1];
 }
-function nt(i, t) {
+function rt(i, t) {
   if (t > 0)
     return i.sections[t - 1];
 }
-function rt(i, t) {
+function dt(i, t) {
   const s = f(t);
   function e(a) {
     for (let o = 0; o < a.sections.length; o++) {
@@ -140,12 +140,12 @@ function rt(i, t) {
                         return c.children.splice(h, 1), l.children[u - 1].children?.push(i), !0;
                       if (r > 0) {
                         c.children.splice(h, 1);
-                        const d = ot(n, r);
+                        const d = at(n, r);
                         if (d?.children && d.children.length > 0)
                           return d.children[d.children.length - 1].children?.push(i), !0;
                       } else if (o > 0) {
                         c.children.splice(h, 1);
-                        const d = nt(a, o);
+                        const d = rt(a, o);
                         if (d?.children && d.children.length > 0) {
                           const g = d.children[d.children.length - 1];
                           if (g.children && g.children.length > 0)
@@ -168,7 +168,7 @@ function rt(i, t) {
   }
   return e(s), s;
 }
-function dt(i, t) {
+function lt(i, t) {
   const s = f(t);
   function e(a) {
     for (let o = 0; o < a.sections.length; o++) {
@@ -191,12 +191,12 @@ function dt(i, t) {
                         return c.children.splice(h, 1), l.children[u + 1].children?.unshift(i), !0;
                       if (r < n.children.length - 1) {
                         c.children.splice(h, 1);
-                        const d = st(n, r);
+                        const d = ot(n, r);
                         if (d?.children && d.children.length > 0)
                           return d.children[0].children?.unshift(i), !0;
                       } else if (o < a.sections.length - 1) {
                         c.children.splice(h, 1);
-                        const d = at(a, o);
+                        const d = nt(a, o);
                         if (d?.children && d.children.length > 0) {
                           const g = d.children[0];
                           if (g.children && g.children.length > 0)
@@ -219,7 +219,7 @@ function dt(i, t) {
   }
   return e(s), s;
 }
-function lt(i, t) {
+function ct(i, t) {
   const s = [];
   function e(a) {
     if (a.nodeType === Node.ELEMENT_NODE) {
@@ -235,9 +235,9 @@ function lt(i, t) {
   }
   return e(i), s;
 }
-class ct extends R {
+class ht extends D {
   constructor() {
-    super(), this._messages = G({ blocking: !0 }), this.#t = D({ context: T }), this._isNodeDirty = !1, this._layoutRef = C(), this._layoutNodeEditorRef = C(), this._handleExitEditMode = async (t) => {
+    super(), this._messages = J({ blocking: !0 }), this.#t = I({ context: M }), this._isNodeDirty = !1, this._layoutRef = C(), this._layoutNodeEditorRef = C(), this._handleExitEditMode = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
     }, this._handlePublishLayout = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutPublished.emit({
@@ -253,15 +253,13 @@ class ct extends R {
         await this._updateLayoutNode(this._nodeBeforeEdit.id, "properties", this._nodeBeforeEdit.properties, void 0, !0);
       }
       this._isEditPanelOpen = !1, this._nodeBeforeEdit = void 0, this.hubTelemetry.emit({
-        ...J.category.interaction.action.close.label.sidePanel,
+        ...A.category.interaction.action.close.label.sidePanel,
         details: this._layoutNodeEditorConfig?.layoutNodeConfig?.name || "unknown"
       });
     }, this._setlayoutNodeEditorRef = async (t) => {
       await this.updateComplete, await new Promise((s) => setTimeout(s, 100)), this.#t.setValue({
-        messages: this._messages,
-        layout: this._processedLayout,
-        layoutNodeEditorRef: t,
-        isLayoutValid: this._isLayoutValid
+        ...this._layoutContext,
+        layoutNodeEditorRef: t
       });
     }, this._liveAnnouncement = void 0, this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this._isLayoutDirty = !1, this._isLayoutValid = !0, this._isEditPanelOpen = !1, this.debug = !1, this.isEditMode = !1, this.isPublishing = !1, this.options = {}, this.arcgisHubLayoutChanged = L(), this.arcgisHubLayoutEditorExit = L(), this.arcgisHubLayoutPublished = L(), this.hubTelemetry = L(), this.listen("arcgisLayoutActivateNode", (t) => {
       this._handleNodeActivate(t);
@@ -283,35 +281,40 @@ class ct extends R {
     this.properties = { _liveAnnouncement: 16, _processedLayout: 16, _layoutErrors: 16, _activatedNode: 16, _layoutNodeEditorConfig: 16, _historyStack: 16, _historyIdx: 16, _isLayoutDirty: 16, _isLayoutValid: 16, _isEditPanelOpen: 16, layout: 0, debug: 7, isEditMode: 7, isPublishing: 5, options: 0 };
   }
   static {
-    this.shadowRootOptions = I;
+    this.shadowRootOptions = T;
   }
   static {
-    this.styles = K;
+    this.styles = Q;
   }
   get _context() {
-    return U();
+    return B();
+  }
+  get _layoutContext() {
+    return {
+      assetPath: k("assets/layout-container/"),
+      messages: this._messages,
+      layout: this._processedLayout,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      layoutNodeEditorRef: this.#t.value?.layoutNodeEditorRef,
+      isLayoutValid: this._isLayoutValid,
+      options: this.options
+    };
   }
   #t;
   connectedCallback() {
     super.connectedCallback(), this._initShell();
   }
   willUpdate(t) {
-    (t.has("layout") || t.has("options")) && this._init(), this.hasUpdated && t.has("isEditMode") && (this._activatedNode = void 0, this._layoutNodeEditorConfig = void 0, this.updateEditModeAnnouncement(), this.isEditMode && lt(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((e) => {
+    (t.has("layout") || t.has("options")) && this._init(), this.hasUpdated && t.has("isEditMode") && (this._activatedNode = void 0, this._layoutNodeEditorConfig = void 0, this.updateEditModeAnnouncement(), this.isEditMode && ct(this._layoutRef.value, "arcgis-hub-gallery, arcgis-hub-image").forEach((e) => {
       e.lazy = !1;
-    })), (!this.hasUpdated || t.has("_processedLayout") || t.has("_isLayoutValid")) && this.#t.setValue({
-      messages: this._messages,
-      layout: this._processedLayout,
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      layoutNodeEditorRef: this.#t.value?.layoutNodeEditorRef,
-      isLayoutValid: this._isLayoutValid
-    });
+    })), (!this.hasUpdated || t.has("_processedLayout") || t.has("_isLayoutValid")) && this.#t.setValue(this._layoutContext);
   }
   _initShell() {
     const t = this.el;
     t.style.setProperty("--offsetTop", `${t.offsetTop}px`);
   }
   async _init() {
-    const t = await et(this.layout);
+    const t = await st(this.layout);
     this._layout = f(t), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
   }
   async getUpdateComplete() {
@@ -325,7 +328,7 @@ class ct extends R {
   }
   async _updateLayoutNode(t, s, e, a, o, n) {
     const r = f(this._layout), l = m(r, t);
-    l && (V(s, e, l), a && (r.variables = {
+    l && (O(s, e, l), a && (r.variables = {
       ...r.variables,
       ...a
     }), this._layout = r, this._processedLayout = await this._validateAndProcess(r, this.options), this._activatedNode = m(this._processedLayout, t), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutValid = o, this._isNodeDirty = !0, this._isLayoutDirty = !0, n && n());
@@ -340,8 +343,8 @@ class ct extends R {
   async _handleLayoutNodeEditorChange(t) {
     const { layoutNodeConfig: s, id: e, values: a, valid: o } = t.detail, n = m(this._layout, e);
     if (n) {
-      const l = (S(s, "editor.valuesOutCallback") || ((c) => c))(a, { nodeId: e, valid: o }), u = l.variables;
-      delete l.variables, n.properties = O(n.properties, l), await this._updateLayoutNode(e, "properties", n.properties, u, o, () => {
+      const l = (H(s, "editor.valuesOutCallback") || ((c) => c))(a, { nodeId: e, valid: o }), u = l.variables;
+      delete l.variables, n.properties = j(n.properties, l), await this._updateLayoutNode(e, "properties", n.properties, u, o, () => {
         this.arcgisHubLayoutChanged.emit();
       });
     }
@@ -353,8 +356,8 @@ class ct extends R {
     }));
   }
   async _validateAndProcess(t, s) {
-    const e = Y(t);
-    return this._layoutErrors = e, e.length > 0 && !this.debug && p.error("Layout validation errors:", e), await z(t, { ...s }, this._context);
+    const e = Z(t);
+    return this._layoutErrors = e, e.length > 0 && !this.debug && p.error("Layout validation errors:", e), await F(t, { ...s }, this._context);
   }
   _handleLayoutNodeEditorOpen(t) {
     const { node: s, element: e } = t.detail;
@@ -362,33 +365,36 @@ class ct extends R {
   }
   openLayoutNodeEditor(t, s) {
     this._isEditPanelOpen = !0;
-    let e = F(t, s);
-    e && (e = q(this._messages, e)), this._layoutNodeEditorConfig = {
+    let e = G(t.tagName.toLowerCase(), this._layoutContext, this._context);
+    e && (e = W(this._messages, e)), this._layoutNodeEditorConfig = {
       layoutNodeConfig: f(e),
       layoutNode: f(s)
     }, this._nodeBeforeEdit = f(this._activatedNode);
   }
   async _handleLayoutAddNode(t) {
     p.debug("Add node event:", t.detail.config.tag);
-    const s = f(this._layout), { column: e, index: a } = A(t.detail.adjacentNode, s);
+    const s = f(this._layout), { column: e, index: a } = S(t.detail.adjacentNode, s);
     p.debug("Found column and index:", e, a);
     const o = {
-      id: H(),
+      id: U(),
       tag: t.detail.config.tag,
       properties: t.detail.config.defaults
     };
     e.children?.splice(a + 1, 0, o), this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), await this.updateComplete, this._activatedNode = o;
     const n = await this._layoutRef.value?.getCardEl(o.id);
-    this.openLayoutNodeEditor(n, this._activatedNode), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit(), t.detail.config.telemetry && this.hubTelemetry.emit(t.detail.config.telemetry);
+    this.openLayoutNodeEditor(n, this._activatedNode), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit(), this.hubTelemetry.emit({
+      ...A.category.interaction.action.select.label.layoutNode,
+      details: t.detail.config.name
+    });
   }
   async _handleLayoutRepositionNode(t) {
-    p.debug("Reposition node event:", t.detail.node.id, t.detail.direction), this._activatedNode = void 0, t.detail.direction === "up" ? (p.debug("Moving node up..."), this._layout = rt(t.detail.node, this._layout)) : (p.debug("Moving node down..."), this._layout = dt(t.detail.node, this._layout)), this._processedLayout = await this._validateAndProcess(this._layout, this.options), await this.updateComplete, this._activatedNode = t.detail.node, (await this._layoutRef.value?.getCardEl(t.detail.node.id))?.scrollIntoView({ behavior: "smooth", block: "nearest" }), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
+    p.debug("Reposition node event:", t.detail.node.id, t.detail.direction), this._activatedNode = void 0, t.detail.direction === "up" ? (p.debug("Moving node up..."), this._layout = dt(t.detail.node, this._layout)) : (p.debug("Moving node down..."), this._layout = lt(t.detail.node, this._layout)), this._processedLayout = await this._validateAndProcess(this._layout, this.options), await this.updateComplete, this._activatedNode = t.detail.node, (await this._layoutRef.value?.getCardEl(t.detail.node.id))?.scrollIntoView({ behavior: "smooth", block: "nearest" }), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
   }
   async _handleLayoutDeleteNode(t) {
     p.debug("Delete node event:", t.detail.id);
     const { id: s } = t.detail, e = f(this._layout), a = m(e, s);
     if (a) {
-      const { column: o, index: n } = A(a, e);
+      const { column: o, index: n } = S(a, e);
       o.children?.splice(n, 1), this._layout = e, this._processedLayout = await this._validateAndProcess(e, this.options), this._activatedNode = void 0, this._handleCloseEditPanel(), this._historyIdx < this._historyStack.length - 1 && (this._historyStack = this._historyStack.slice(0, this._historyIdx + 1)), this._historyStack.push(this._processedLayout), this._historyIdx = this._historyStack.length - 1, this._isLayoutDirty = !0, this.arcgisHubLayoutChanged.emit();
     }
   }
@@ -400,7 +406,7 @@ class ct extends R {
     let t;
     if (this.isEditMode) {
       const s = this._layoutNodeEditorConfig;
-      t = _`<calcite-shell-panel .collapsed=${!this._isEditPanelOpen} position=end slot=panel-end><calcite-panel .heading=${j(s || {}, "layoutNodeConfig.i18n.label", S(this._messages, "layoutNodeControls.configurableNodes.default.label"))} id=editor-panel ${$(this._setlayoutNodeEditorRef)}>${s?.layoutNodeConfig?.editor && _`<calcite-action class="panel-close" icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${w(s.layoutNode.id, _`<arcgis-layout-node-editor .layoutNodeConfig=${s.layoutNodeConfig} .node=${s.layoutNode}></arcgis-layout-node-editor>`)}` || ""}</calcite-panel></calcite-shell-panel>`;
+      t = _`<calcite-shell-panel .collapsed=${!this._isEditPanelOpen} position=end slot=panel-end><calcite-panel .heading=${z(s || {}, "layoutNodeConfig.i18n.label", this._messages.configurableNodes.default.label)} id=editor-panel ${$(this._setlayoutNodeEditorRef)}>${s?.layoutNodeConfig?.editor && _`<calcite-action class="panel-close" icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${w(s.layoutNode.id, _`<arcgis-layout-node-editor .layoutNodeConfig=${s.layoutNodeConfig} .node=${s.layoutNode}></arcgis-layout-node-editor>`)}` || ""}</calcite-panel></calcite-shell-panel>`;
     }
     return t;
   }
@@ -408,7 +414,7 @@ class ct extends R {
     return _`<calcite-shell>${w("aria-live-region", _`<div aria-atomic=true aria-live=polite id=arcgis-layout-container-edit-mode-live-region>${this._liveAnnouncement}</div>`)}${this.renderEditToolbar()}${this.renderEditor()}<arcgis-layout .activatedNode=${this._activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .layout=${this._processedLayout} .options=${this.options} ${$(this._layoutRef)}></arcgis-layout></calcite-shell>`;
   }
 }
-P("arcgis-layout-container", ct);
+R("arcgis-layout-container", ht);
 export {
-  ct as ArcgisLayoutContainer
+  ht as ArcgisLayoutContainer
 };

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.26/esri/copyright.txt for details.
-v0.26.2 */
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.0 */
 const c = e`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
 class d extends o {
   constructor() {

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

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

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

@@ -1,24 +1,24 @@
 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 s, mergeObjects as h, getWithDefault as a } from "@esri/hub-common";
-import { createRef as g, ref as f } from "lit/directives/ref.js";
+import { getProp as s, deepMerge as h, cloneObject as g, getWithDefault as a } from "@esri/hub-common";
+import { createRef as f, ref as C } from "lit/directives/ref.js";
 import { html as r } from "lit";
-import { css as C } from "@lit/reactive-element/css-tag.js";
+import { css as p } 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";
+import { l as v } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.2 */
-const v = C`@layer{arcgis-configuration-editor:focus{--focus-color: var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:solid 2px var(--focus-color)}}`;
-class y extends u {
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.0 */
+const y = p`@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 E extends u {
   constructor() {
-    super(...arguments), this._configEditorRef = g(), this.#o = d({ context: p }), this._values = {}, this.arcgisLayoutNodeChange = l();
+    super(...arguments), this._configEditorRef = f(), this.#o = d({ context: v }), this._values = {}, this.arcgisLayoutNodeChange = l();
   }
   static {
     this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = v;
+    this.styles = y;
   }
   static {
     this.shadowRootOptions = c;
@@ -47,10 +47,10 @@ class y extends u {
   }
   _handleConfigurationEditorChange(o) {
     o.stopPropagation();
-    const { values: t = {}, valid: i } = o.detail, e = h(t, this._values);
+    const { values: t = {}, valid: i } = o.detail, e = h(this._values, t);
     this._values = e, this.arcgisLayoutNodeChange.emit({
       layoutNodeConfig: this.layoutNodeConfig,
-      values: e,
+      values: g(e),
       valid: i,
       id: this.node.id
     });
@@ -62,13 +62,13 @@ class y extends u {
       onInputChangeEvent: this._handleConfigurationEditorChange,
       [t]: this._values,
       ...this.layoutNodeConfig.editor.properties || {}
-    } }) : r`<arcgis-configuration-editor @keydown=${(i) => i.stopPropagation()} @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${f(this._configEditorRef)}></arcgis-configuration-editor>`;
+    } }) : r`<arcgis-configuration-editor @keydown=${(i) => i.stopPropagation()} @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${C(this._configEditorRef)}></arcgis-configuration-editor>`;
   }
   render() {
     return !this.node || !this.layoutNodeConfig ? r`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
   }
 }
-n("arcgis-layout-node-editor", y);
+n("arcgis-layout-node-editor", E);
 export {
-  y as ArcgisLayoutNodeEditor
+  E 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.26/esri/copyright.txt for details.
-v0.26.2 */
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.0 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

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

@@ -1,9 +1,9 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { HTMLConfigurableLayoutNodeElement, LayoutNode } from '@esri/hub-common';
+import { HTMLConfigurableLayoutNodeElement, ILayoutNodeConfig, LayoutNode } from '@esri/hub-common';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
-import { IAddLayoutNodeConfiguration } from '../layouts/utils/getAddableLayoutNodes';
 import { ILayoutNodeActivateEventDetail, ILayoutNodeAddEventDetail } from '../layouts/utils/layout-event-types';
+import { PropertyValues } from 'lit';
 
 /** @private */
 export declare class ArcgisLayoutNodeWrapper extends LitElement {