@esri/hub-web-components 0.12.4 → 0.13.1

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

@@ -1,206 +1,261 @@
-import { c as b } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
-import { keyed as m } from "lit-html/directives/keyed.js";
-import { LitElement as C, createEvent as E, noShadowRoot as w } from "@arcgis/lumina";
-import { createRef as N, ref as v } from "lit/directives/ref.js";
-import { css as S } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as $, cloneObject as h, Logger as u, deepFindById as y, getProp as A } from "@esri/hub-common";
-import { g as M } from "../../chunks/state.js";
-import { p as x } from "../../chunks/processLayout.js";
-import { c as k, b as f, i as p, a as _ } from "../../chunks/typeGuards.js";
-import { g as T, i as P } from "../../chunks/interpolate-translations.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { migrateSchema as I } from "@esri/hub-components";
+import { c as w } from "../../chunks/runtime.js";
+import { html as c } from "lit-html";
+import { keyed as N } from "lit-html/directives/keyed.js";
+import { LitElement as x, useContextProvider as A, createEvent as f, noShadowRoot as P } from "@arcgis/lumina";
+import { createRef as L, ref as b } 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 M } from "@esri/hub-common";
+import { g as H } from "../../chunks/state.js";
+import { f as g, p as V } from "../../chunks/processLayout.js";
+import { c as I, b as m, i as y, a as E } from "../../chunks/typeGuards.js";
+import { g as O, i as D } from "../../chunks/interpolate-translations.js";
+import { u as R } from "../../chunks/useT9n.js";
+import { migrateSchema as j } from "@esri/hub-components";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-const H = S`@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));calcite-panel>*{margin:1rem}}}`;
-function R(i, t) {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+const U = 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 G(t, i) {
   const o = ["order", "offset", "width"], s = [];
   return o.forEach((e) => {
     let a;
-    f(i) && (a = i.sectionProps?.[e]), p(i) && (a = i.rowProps?.[e]), _(i) && (a = i.columnProps?.[e]), typeof a == "number" ? (a < 0 || a > 12) && s.push(`Node "${i.id}": ${t} > ${e} out of range (0-12): ${a}`) : typeof a == "object" && Object.entries(a).forEach(([r, n]) => {
-      typeof n == "number" && (n < 0 || n > 12) && s.push(`Node "${i.id}": ${t} > ${e}.${r} out of range (0-12): ${n}`);
+    m(t) && (a = t.sectionProps?.[e]), y(t) && (a = t.rowProps?.[e]), E(t) && (a = t.columnProps?.[e]), typeof a == "number" ? (a < 0 || a > 12) && s.push(`Node "${t.id}": ${i} > ${e} out of range (0-12): ${a}`) : typeof a == "object" && Object.entries(a).forEach(([n, r]) => {
+      typeof r == "number" && (r < 0 || r > 12) && s.push(`Node "${t.id}": ${i} > ${e}.${n} out of range (0-12): ${r}`);
     });
   }), s;
 }
-function V(i, t, o, s) {
+function F(t, i, o, s) {
   const e = [];
-  return i.id || e.push(`${t} > missing required id.`), i.tag || e.push(`${t} > missing required tag.`), i.id && (o.has(i.id) && e.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), o.add(i.id)), s.includes(i.tag) || e.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), e.push(...R(i, t)), (f(i) || p(i) || _(i)) && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && e.push(`Node "${i.id}": ${t} > missing or empty children array.`), e;
+  return t.id || e.push(`${i} > missing required id.`), t.tag || e.push(`${i} > missing required tag.`), t.id && (o.has(t.id) && e.push(`Node "${t.id}": ${i} > duplicate id: "${t.id}"`), o.add(t.id)), s.includes(t.tag) || e.push(`Node "${t.id}": ${i} > has invalid tag: ${t.tag}`), e.push(...G(t, i)), (m(t) || y(t) || E(t)) && (!t.children || !Array.isArray(t.children) || t.children.length === 0) && e.push(`Node "${t.id}": ${i} > missing or empty children array.`), e;
 }
-function g({ node: i, nodePath: t, idSet: o, validTags: s, errors: e }) {
-  if (i.tag === "arcgis-nav-card") {
-    const a = i.properties;
-    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((n, d) => {
-      const c = `${t}.sections[${d}]`;
-      g({
-        node: n,
-        nodePath: c,
+function _({ node: t, nodePath: i, idSet: o, validTags: s, errors: e }) {
+  if (t.tag === "arcgis-nav-card") {
+    const a = t.properties;
+    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((r, h) => {
+      const d = `${i}.sections[${h}]`;
+      _({
+        node: r,
+        nodePath: d,
         idSet: o,
         validTags: ["arcgis-layout-section"],
         errors: e
       });
     });
   }
-  e.push(...V(i, t, o, s)), Array.isArray(i.children) && i.children.forEach((a, r) => {
-    let n = `${t}.Child[${r}]`, d = Array.from($);
-    f(i) ? (d = ["arcgis-layout-row"], n = `${t}.Row[${r}]`) : p(i) ? (d = ["arcgis-layout-column"], n = `${t}.Column[${r}]`) : _(i) && (d = Array.from($).filter(
-      (c) => c !== "arcgis-layout-column" && c !== "arcgis-layout-section"
-    )), g({
+  e.push(...F(t, i, o, s)), Array.isArray(t.children) && t.children.forEach((a, n) => {
+    let r = `${i}.Child[${n}]`, h = Array.from($);
+    m(t) ? (h = ["arcgis-layout-row"], r = `${i}.Row[${n}]`) : y(t) ? (h = ["arcgis-layout-column"], r = `${i}.Column[${n}]`) : E(t) && (h = Array.from($).filter(
+      (d) => d !== "arcgis-layout-column" && d !== "arcgis-layout-section"
+    )), _({
       node: a,
-      nodePath: n,
+      nodePath: r,
       idSet: o,
-      validTags: d,
+      validTags: h,
       errors: e
     });
   });
 }
-function j(i) {
-  const t = [], o = /* @__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, e) => {
-    if (k(s)) {
-      t.push(`Section[${e}] is a reference and cannot be a direct child.`);
+function q(t) {
+  const i = [], o = /* @__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((s, e) => {
+    if (I(s)) {
+      i.push(`Section[${e}] is a reference and cannot be a direct child.`);
       return;
     }
-    const a = s, r = `Section[${e}]`;
-    g({
+    const a = s, n = `Section[${e}]`;
+    _({
       node: a,
-      nodePath: r,
+      nodePath: n,
       idSet: o,
       validTags: ["arcgis-layout-section"],
-      errors: t
+      errors: i
     });
-  }), console.log("idSet:", o), t) : (t.push("Layout must be defined."), t);
+  }), console.log("idSet:", o), i) : (i.push("Layout must be defined."), i);
 }
-async function U(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 F(i) {
-  const t = h(i);
-  return t.schemaVersion = 2, t;
+function B(t) {
+  const i = l(t);
+  return i.schemaVersion = 2, i;
 }
-const D = {
-  2: F
+const X = {
+  2: B
 };
-async function q(i) {
-  const t = I(i, D), o = await Promise.all(
-    t.sections.map(async (s) => await L(s))
+async function Y(t) {
+  const i = j(t, X), o = await Promise.all(
+    i.sections.map(async (s) => await C(s))
   );
-  return t.sections = o, t;
+  return i.sections = o, i;
 }
-async function L(i) {
-  const o = (await U(i.tag))(i);
+async function C(t) {
+  const o = (await z(t.tag))(t);
   return Array.isArray(o.children) && (o.children = await Promise.all(
-    o.children.map(async (s) => await L(s))
+    o.children.map(async (s) => await C(s))
   )), o;
 }
-class z extends C {
+function p(t, i) {
+  if (!(!i.sections || i.sections.length === 0)) {
+    for (const o of i.sections)
+      if (o.children) {
+        for (const s of o.children)
+          if (s.children) {
+            for (const e of s.children)
+              if (e.children)
+                for (let a = 0; a < e.children.length; a++) {
+                  const n = e.children[a];
+                  if (n.id === t.id)
+                    return { column: e, index: a };
+                  if (n.tag === "arcgis-nav-card") {
+                    const r = n.properties?.sections, h = p(t, {
+                      sections: r || []
+                    });
+                    if (h)
+                      return h;
+                  }
+                  if (y(n) && n.children) {
+                    const r = p(t, {
+                      sections: [{ children: [n] }]
+                    });
+                    if (r)
+                      return r;
+                  }
+                }
+          }
+      }
+  }
+}
+class W extends x {
   constructor() {
-    super(), this._messages = O(), this._nodeControlsEl = N(), this._initShell = () => {
-      const t = this.el;
-      t.style.setProperty("--offsetTop", `${t.offsetTop}px`);
-    }, this._layoutNodeEditor = N(), this._handleExitEditMode = async (t) => {
-      t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
-    }, this._handlePublishLayout = async () => {
-      u.log("HANDLE LAYOUT PUBLISH >>>", this.layout);
-    }, this._liveAnnouncement = void 0, this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this.debug = !1, this.isEditMode = !1, this.options = {}, this.arcgisHubLayoutChanged = E(), this.arcgisHubLayoutEditorExit = E(), this.listen("arcgisLayoutNodeChange", async (t) => await this._handleLayoutNodeEditorChange(t)), this.listen("arcgisLayoutNodeVisibilityChange", async (t) => await this._handleLayoutNodeVisibilityChange(t)), this.listen("arcgisLayoutNodeActivate", (t) => this._handleNodeMouseEnter(t)), this.listen("arcgisLayoutNodeDeactivate", (t) => this._handleNodeMouseLeave(t)), this.listen("arcgisLayoutNodeEditorOpen", () => this._handleLayoutNodeEditorOpen()), this.listenOn(window, "resize", this._initShell);
+    super(), this._messages = R({ blocking: !0 }), this.#i = A({ context: S }), this._nodeControlsEl = L(), this._initShell = () => {
+      const i = this.el;
+      i.style.setProperty("--offsetTop", `${i.offsetTop}px`);
+    }, this._layoutNodeEditor = L(), this._handleExitEditMode = async (i) => {
+      i.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
+    }, this._handlePublishLayout = async (i) => {
+      i.stopPropagation(), this.arcgisHubLayoutPublished.emit(this._layout);
+    }, this._handleCloseEditPanel = () => {
+      this._isEditPanelOpen = !1;
+    }, 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 = f(), this.arcgisHubLayoutEditorExit = f(), this.arcgisHubLayoutPublished = f(), 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.listenOn(window, "resize", this._initShell);
   }
   static {
-    this.properties = { _liveAnnouncement: 16, _processedLayout: 16, _layoutErrors: 16, _currentNode: 16, _currentElement: 16, _layoutNodeEditorConfig: 16, _historyStack: 16, _historyIdx: 16, layout: 0, debug: 7, isEditMode: 7, options: 0 };
+    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 = w;
+    this.shadowRootOptions = P;
   }
   static {
-    this.styles = H;
+    this.styles = U;
   }
   get _context() {
-    return M();
+    return H();
   }
+  #i;
   connectedCallback() {
     super.connectedCallback(), this._initShell();
   }
-  willUpdate(t) {
-    (t.has("layout") || t.has("options")) && this._init(), t.has("isEditMode") && this.updateEditModeAnnouncement();
+  willUpdate(i) {
+    (i.has("layout") || i.has("options")) && this._init(), this.hasUpdated && i.has("isEditMode") && this.updateEditModeAnnouncement();
+  }
+  loaded() {
+    this.#i.setValue(this._messages);
   }
   updateEditModeAnnouncement() {
     this._liveAnnouncement = "";
-    const t = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
+    const i = this.isEditMode ? this._messages.editModeActivatedLiveRegion : this._messages.editModeDeactivatedLiveRegion;
     setTimeout(() => {
-      this._liveAnnouncement = t;
+      this._liveAnnouncement = i;
     }, 250);
   }
   async _init() {
-    const t = await q(this.layout);
-    this._layout = h(t), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
+    const i = await Y(this.layout);
+    this._layout = l(i), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
   }
-  async _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: o, id: s, values: e } = t.detail, a = h(this._layout), r = y(a, s);
+  async _handleLayoutNodeEditorChange(i) {
+    const { layoutNodeConfig: o, id: s, values: e, valid: a } = i.detail, n = l(this._layout), r = g(n, s);
     if (r) {
-      const n = o.valuesProp, d = A(o, "editor.valuesOutCallback") || ((c) => c);
-      r.properties && n ? r.properties[n] = d(e) : r.properties = d(e), this._layout = a, this._processedLayout = await this._validateAndProcess(a, this.options), 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.arcgisHubLayoutChanged.emit();
+      const h = v(o, "editor.valuesOutCallback") || ((d) => d);
+      r.properties = h(e), this._layout = n, this._processedLayout = await this._validateAndProcess(n, 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._isLayoutValid = a, this.arcgisHubLayoutChanged.emit();
     }
   }
-  async _handleLayoutNodeVisibilityChange(t) {
-    const { id: o } = t.detail, s = h(this._layout), e = y(s, o);
-    e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && (e.visibility.isHidden = !e.visibility.isHidden), this._currentNode = e, this._layout = s, this._processedLayout = await this._validateAndProcess(s, this.options), 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.arcgisHubLayoutChanged.emit());
+  async _handleLayoutNodeVisibilityChange(i) {
+    const { id: o } = i.detail, s = l(this._layout), e = g(s, o);
+    e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && (e.visibility.isHidden = !e.visibility.isHidden), this._layout = s, this._processedLayout = await this._validateAndProcess(s, 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.arcgisHubLayoutChanged.emit());
   }
-  async _validateAndProcess(t, o) {
-    const s = j(t);
-    return this._layoutErrors = s, s.length > 0 && !this.debug && u.error("Layout validation errors:", s), await x(t, o, this._context);
+  async _validateAndProcess(i, o) {
+    const s = q(i);
+    return this._layoutErrors = s, s.length > 0 && !this.debug && u.error("Layout validation errors:", s), await V(i, o, this._context);
   }
-  _handleNodeMouseEnter(t) {
-    t.stopPropagation(), u.debug("MOUSE OVER EVENT >>>", t);
-    const o = t.detail, s = o.dataset.nodeId || "";
+  hitTest(i) {
+    let o = !1;
+    if (this._highlightedElement) {
+      const s = this._highlightedElement.getBoundingClientRect();
+      i.clientX >= s.left && i.clientX <= s.right && i.clientY >= s.top && i.clientY <= s.bottom && (o = !0);
+    }
+    return o;
+  }
+  _handleNodeHighlight(i) {
+    i.stopPropagation(), u.debug("NODE HIGHLIGHT EVENT >>>", i);
+    const o = i.detail.target, s = o.dataset.nodeId || "";
     if (s) {
-      const e = y(this._processedLayout, s);
-      e ? this._currentNode !== e && this._currentElement !== o && (this._currentNode = e, this._currentElement = o) : u.warn(`No node found for target with id ${s}`);
+      const e = g(this._processedLayout, s);
+      e ? this._highlightedNode !== e && this._highlightedElement !== o && (this._highlightedNode = e, this._highlightedElement = o) : u.warn(`No node found for target with id ${s}`);
     }
   }
-  _handleNodeMouseLeave(t) {
-    t.stopPropagation(), u.debug("MOUSE OUT EVENT >>>", t);
-    const o = t.detail;
-    !this._nodeControlsEl.value?.matches(":hover") && this._currentElement === o && (this._currentNode = void 0, this._currentElement = void 0);
+  _handleNodeUnHighlight(i) {
+    i.stopPropagation(), u.debug("NODE UNHIGHLIGHT EVENT >>>", i), !this._nodeControlsEl.value?.matches(":hover") && // this._highlightedElement === referenceElement &&
+    !this.hitTest(i.detail) && (this._highlightedNode = void 0, this._highlightedElement = void 0);
   }
-  _handleNodeControlsMouseOut() {
-    this._currentElement?.matches(":hover") || (this._currentNode = void 0, this._currentElement = void 0);
+  _handleNodeControlsMouseOut(i) {
+    this.hitTest(i) || (this._highlightedNode = void 0, this._highlightedElement = void 0);
   }
   _handleLayoutNodeEditorOpen() {
-    if (!this._currentElement || !this._currentNode)
+    if (!this._highlightedElement || !this._highlightedNode)
       return;
-    let t = T(this._currentElement, this._currentNode);
-    t && (t = P(this._messages, t)), this._layoutNodeEditorConfig = {
-      layoutNodeConfig: h(t),
-      layoutNode: h(this._currentNode)
+    this._isEditPanelOpen = !0;
+    let i = O(this._highlightedElement, this._highlightedNode);
+    i && (i = D(this._messages, i)), this._layoutNodeEditorConfig = {
+      layoutNodeConfig: l(i),
+      layoutNode: l(this._highlightedNode)
     };
   }
+  async _handleLayoutAddNode(i) {
+    u.debug("Add node event:", i.detail.config.tag);
+    const o = l(this._layout), { column: s, index: e } = p(i.detail.adjacentNode, o);
+    u.debug("Found column and index:", s, e), s.children?.splice(e + 1, 0, {
+      id: T(),
+      tag: i.detail.config.tag,
+      properties: i.detail.config.defaults
+    }), this._highlightedNode = void 0, this._highlightedElement = void 0, this._layout = o, this._processedLayout = await this._validateAndProcess(o, this.options);
+  }
   renderEditToolbar() {
-    let t;
-    return this.isEditMode && (t = l`<arcgis-layout-editor-toolbar .exitEditMode=${this._handleExitEditMode} .publishLayout=${this._handlePublishLayout} slot=header></arcgis-layout-editor-toolbar>`), t;
+    let i;
+    return this.isEditMode && (i = 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>`), i;
   }
   renderNodeControls() {
-    let t;
-    return this.isEditMode && this._currentElement && this._currentNode && (t = l`<arcgis-layout-node-controls .layoutNodeEditorRef=${this._layoutNodeEditor.value} .isEditMode=${this.isEditMode} .messages=${this._messages} .node=${this._currentNode} @mouseout=${this._handleNodeControlsMouseOut} .referenceElement=${this._currentElement} style="position: absolute;" ${v(this._nodeControlsEl)}></arcgis-layout-node-controls>`), t;
+    let i;
+    return this.isEditMode && this._highlightedElement && this._highlightedNode && (i = 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;" ${b(this._nodeControlsEl)}></arcgis-layout-node-controls>`), i;
   }
   renderEditor() {
-    if (this.isEditMode) {
-      const t = this._layoutNodeEditorConfig;
-      if (t?.layoutNodeConfig?.editor)
-        return l`<calcite-shell-panel position=end slot=panel-end><calcite-panel>${m(t.layoutNode.id, l`<arcgis-layout-node-editor .layoutNodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode} ${v(this._layoutNodeEditor)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
+    if (this.isEditMode && this._isEditPanelOpen) {
+      const i = this._layoutNodeEditorConfig;
+      if (i?.layoutNodeConfig?.editor)
+        return c`<calcite-shell-panel position=end slot=panel-end><calcite-panel .heading=${M(i.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>${N(i.layoutNode.id, c`<arcgis-layout-node-editor .layoutNodeConfig=${i.layoutNodeConfig} .node=${i.layoutNode} ${b(this._layoutNodeEditor)}></arcgis-layout-node-editor>`)}</calcite-panel></calcite-shell-panel>`;
     }
     return null;
   }
   render() {
-    return l`<calcite-shell>${m("aria-live-region", l`<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 .currentNode=${this._currentNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .layout=${this._processedLayout} .options=${this.options}></arcgis-layout></calcite-shell>`;
+    return c`<calcite-shell>${N("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}></arcgis-layout></calcite-shell>`;
   }
 }
-b("arcgis-layout-container", z);
+w("arcgis-layout-container", W);
 export {
-  z as ArcgisLayoutContainer
+  W as ArcgisLayoutContainer
 };

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

@@ -2,6 +2,7 @@ import "../arcgis-layout-editor-toolbar/index.js";
 import "../arcgis-layout-node-controls/index.js";
 import "@esri/calcite-components/components/calcite-shell-panel";
 import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-action";
 import "../arcgis-layout-node-editor/index.js";
 import "@esri/calcite-components/components/calcite-shell";
 import "../arcgis-layout/index.js";

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

@@ -2,6 +2,7 @@ import "../arcgis-layout-editor-toolbar/index.js";
 import "../arcgis-layout-node-controls/index.js";
 import "@esri/calcite-components/components/calcite-shell-panel";
 import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-action";
 import "../arcgis-layout-node-editor/index.js";
 import "@esri/calcite-components/components/calcite-shell";
 import "../arcgis-layout/index.js";

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

@@ -4,5 +4,27 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 /** @private */
 export declare class ArcgisLayoutEditorToolbar extends LitElement {
     exitEditMode: ((event: MouseEvent) => Promise<void>) | undefined;
-    publishLayout: (() => Promise<void>) | undefined;
+    publishLayout: ((event: MouseEvent) => Promise<void>) | undefined;
+    /**
+     * Whether the layout has unsaved changes.
+     * We use this to determine the state and
+     * tooltip of the "Publish" button.
+     *
+     * @default false
+     */
+    isLayoutDirty: boolean;
+    /**
+     * Whether the layout is valid. We use
+     * this to determine the state and tooltip
+     * of the "Publish" button.
+     *
+     * @default true
+     */
+    isLayoutValid: boolean;
+    /**
+     * whether the layout is currently being published
+     *
+     * @default false
+     */
+    isPublishing: boolean;
 }

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

@@ -1,35 +1,42 @@
-import { c as e } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { LitElement as o } from "@arcgis/lumina";
-import { css as s } from "@lit/reactive-element/css-tag.js";
+import { c as i } from "../../chunks/runtime.js";
+import { html as s } from "lit-html";
+import { LitElement as e } from "@arcgis/lumina";
+import { css as o } from "@lit/reactive-element/css-tag.js";
 import { u as a } from "../../chunks/useT9n.js";
-import { focusElement as r } from "@arcgis/toolkit/dom";
-import { createRef as c, ref as l } from "lit/directives/ref.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.12/esri/copyright.txt for details.
-v0.12.4 */
-const n = s`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 m extends o {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+const c = o`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
+class u extends e {
   constructor() {
-    super(...arguments), this._messages = a(), this._exitButtonEl = c();
+    super(...arguments), this._messages = a(), this._exitButtonEl = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
   }
   static {
-    this.properties = { exitEditMode: 0, publishLayout: 0 };
+    this.properties = { exitEditMode: 0, publishLayout: 0, isLayoutDirty: 5, isLayoutValid: 5, isPublishing: 5 };
   }
   static {
-    this.styles = n;
+    this.styles = c;
+  }
+  get _isPublishDisabled() {
+    return this.isPublishing || !this.isLayoutDirty || !this.isLayoutValid;
+  }
+  get _disalbedPublishTooltip() {
+    let t;
+    return this.isLayoutDirty || (t = this._messages.noChanges), this.isLayoutValid || (t = this._messages.invalidLayout), t;
   }
   updated() {
     setTimeout(() => {
-      r(this._exitButtonEl.value);
+      l(this._exitButtonEl.value);
     }, 50);
   }
   render() {
     const t = this._messages.exit;
-    return i`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${l(this._exitButtonEl)}></calcite-action><div slot=content-end><calcite-button disabled @click=${this.publishLayout} round>${this._messages.publish}</calcite-button></div></calcite-navigation>`;
+    return s`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${n(this._exitButtonEl)}></calcite-action><div slot=content-end><arcgis-ref-tooltip .isSlottedElDisabled=${this._isPublishDisabled} .text=${this._disalbedPublishTooltip}><calcite-button .disabled=${this._isPublishDisabled} .loading=${this.isPublishing} @click=${this.publishLayout} round>${this._messages.publish}</calcite-button></arcgis-ref-tooltip></div></calcite-navigation>`;
   }
 }
-e("arcgis-layout-editor-toolbar", m);
+i("arcgis-layout-editor-toolbar", u);
 export {
-  m as ArcgisLayoutEditorToolbar
+  u as ArcgisLayoutEditorToolbar
 };

package/dist/components/arcgis-layout-editor-toolbar/index.d.ts

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-navigation";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
 import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-navigation";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
 import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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

@@ -13,6 +13,17 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
      * @default false
      */
     isEditMode: boolean;
+    /**
+     * Indicates whether the layout is valid.
+     * This is based on the currently open node
+     * editor. If the node's configuration is
+     * invalid, we don't allow the user to take
+     * any action that would close the currently
+     * invalid editor.
+     *
+     * @default true
+     */
+    isLayoutValid: boolean;
     /** The node being configured */
     node?: LayoutNode;
     /** Reference element for popover positioning */

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

@@ -1,33 +1,36 @@
-import { c as l } from "../../chunks/runtime.js";
-import { html as n } from "lit-html";
-import { LitElement as r, createEvent as t } from "@arcgis/lumina";
+import { c as n } from "../../chunks/runtime.js";
+import { html as s } from "lit-html";
+import { LitElement as r, createEvent as i } from "@arcgis/lumina";
 import { css as c } from "@lit/reactive-element/css-tag.js";
-import { cloneObject as d, getWithDefault as i, getProp as o, isNil as u } from "@esri/hub-common";
-import { g as h, i as f } from "../../chunks/interpolate-translations.js";
-import { i as g } from "../../chunks/isNodeVisible.js";
-import { dictionary as m } from "@esri/telemetry-dictionary-hub";
+import { cloneObject as d, getWithDefault as t, isNil as u, getProp as o } from "@esri/hub-common";
+import { g as h, i as g } from "../../chunks/interpolate-translations.js";
+import { i as f } from "../../chunks/isNodeVisible.js";
+import { dictionary as p } from "@esri/telemetry-dictionary-hub";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.12/esri/copyright.txt for details.
-v0.12.4 */
-const p = c`:host{position:absolute}`;
-class b extends r {
+See https://js.arcgis.com/0.13/esri/copyright.txt for details.
+v0.13.1 */
+const m = c`:host{position:absolute}`;
+class y extends r {
   constructor() {
-    super(...arguments), this.isEditMode = !1, this.hubTelemetry = t(), this.arcgisLayoutNodeEditorOpen = t(), this.arcgisLayoutNodeVisibilityChange = t();
+    super(...arguments), this.isEditMode = !1, this.isLayoutValid = !0, this.hubTelemetry = i(), this.arcgisLayoutNodeEditorOpen = i(), this.arcgisLayoutNodeVisibilityChange = i();
   }
   static {
-    this.properties = { isEditMode: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
+    this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = m;
   }
   get _layoutNodeConfig() {
     if (!this.referenceElement || !this.node)
       return;
     let e = h(this.referenceElement, this.node);
-    return e && (e = f(this.messages, e)), d(e);
+    return e && (e = g(this.messages, e)), d(e);
   }
   get _isNodeVisible() {
-    return g(this.node);
+    return f(this.node);
+  }
+  _onOpenEditorButtonClick() {
+    this.arcgisLayoutNodeEditorOpen.emit();
   }
   _onToggleVisibilityClick() {
     this.arcgisLayoutNodeVisibilityChange.emit({
@@ -37,7 +40,7 @@ class b extends r {
     });
     const e = this._isNodeVisible ? "disable" : "enable";
     this.hubTelemetry.emit({
-      ...m.category.interaction.action[e].label.visibility,
+      ...p.category.interaction.action[e].label.visibility,
       details: this._layoutNodeConfig.name
     });
   }
@@ -45,16 +48,16 @@ class b extends r {
     const e = this._layoutNodeConfig;
     if (!e || !this.referenceElement)
       return null;
-    const s = this.messages.layoutNodeControls?.a11yLabel || "", a = this.layoutNodeEditorRef ? {
+    const a = this.messages.layoutNodeControls.a11yLabel || "", l = this.layoutNodeEditorRef ? {
       extraContainers: [this.layoutNodeEditorRef]
     } : void 0;
-    return n`<calcite-popover auto-close .focusTrapOptions=${a} offset-distance=0 .label=${s} open overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${this.referenceElement}><calcite-action-bar expand-disabled layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${i(e, "i18n.label", o(this.messages, "layoutNodeControls.configurableNodes.default.label"))} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${u(e.canAdjustVisibility) ? !1 : !e.canAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? i(e, "i18n.hideLabel", o(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : i(e, "i18n.showLabel", o(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action></calcite-action-group></calcite-action-bar></calcite-popover>`;
+    return s`<calcite-popover auto-close .focusTrapOptions=${l} offset-distance=0 .label=${a} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${this.referenceElement}><calcite-action-bar expand-disabled layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${t(e, "i18n.label", this.messages.layoutNodeControls.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${u(e.canAdjustVisibility) ? !1 : !e.canAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? t(e, "i18n.hideLabel", o(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : t(e, "i18n.showLabel", o(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action>${e.editor && s`<arcgis-ref-tooltip .text=${this.node?.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node?.readOnly || !e.canEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${t(e, "i18n.edit", o(this.messages, "layoutNodeControls.configurableNodes.default.edit"))}></calcite-action></arcgis-ref-tooltip>` || ""}</calcite-action-group></calcite-action-bar></calcite-popover>`;
   }
   render() {
     return this.isEditMode && this.node && this.referenceElement && this.renderControls() || "";
   }
 }
-l("arcgis-layout-node-controls", b);
+n("arcgis-layout-node-controls", y);
 export {
-  b as ArcgisLayoutNodeControls
+  y as ArcgisLayoutNodeControls
 };