@esri/hub-web-components 0.13.4 → 0.13.5

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

@@ -12,68 +12,69 @@ 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
-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(i, t) {
-  const o = ["order", "offset", "width"], s = [];
-  return o.forEach((e) => {
+v0.13.5 */
+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) && s.push(`Node "${i.id}": ${t} > ${e} out of range (0-12): ${a}`) : typeof a == "object" && Object.entries(a).forEach(([h, n]) => {
-      typeof n == "number" && (n < 0 || n > 12) && s.push(`Node "${i.id}": ${t} > ${e}.${h} out of range (0-12): ${n}`);
+    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}`);
     });
-  }), s;
+  }), o;
 }
-function F(i, t, 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 && (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(...G(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;
+  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 m({ node: i, nodePath: t, idSet: o, validTags: s, errors: e }) {
+function m({ node: i, nodePath: t, idSet: s, validTags: o, errors: e }) {
   if (i.tag === "arcgis-nav-card") {
     const a = i.properties;
-    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((n, r) => {
+    a && typeof a == "object" && Array.isArray(a.sections) && a.sections.forEach((h, r) => {
       const d = `${t}.sections[${r}]`;
       m({
-        node: n,
+        node: h,
         nodePath: d,
-        idSet: o,
+        idSet: s,
         validTags: ["arcgis-layout-section"],
         errors: e
       });
     });
   }
-  e.push(...F(i, t, o, s)), Array.isArray(i.children) && i.children.forEach((a, h) => {
-    let n = `${t}.Child[${h}]`, r = Array.from($);
-    N(i) ? (r = ["arcgis-layout-row"], n = `${t}.Row[${h}]`) : f(i) ? (r = ["arcgis-layout-column"], n = `${t}.Column[${h}]`) : L(i) && (r = Array.from($).filter(
+  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: n,
-      idSet: o,
+      nodePath: h,
+      idSet: s,
       validTags: r,
       errors: e
     });
   });
 }
-function q(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 (O(s)) {
+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.`);
       return;
     }
-    const a = s, h = `Section[${e}]`;
+    const a = o, n = `Section[${e}]`;
     m({
       node: a,
-      nodePath: h,
-      idSet: o,
+      nodePath: n,
+      idSet: s,
       validTags: ["arcgis-layout-section"],
       errors: t
     });
   }), t) : (t.push("Layout must be defined."), t);
 }
-async function z(i) {
+async function B(i) {
   switch (i) {
     case "arcgis-text-card":
       return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
@@ -82,57 +83,57 @@ async function z(i) {
       return ((t) => t);
   }
 }
-function B(i) {
+function X(i) {
   const t = l(i);
   return t.schemaVersion = 2, t;
 }
-const X = {
-  2: B
+const Y = {
+  2: X
 };
-async function Y(i) {
-  const t = j(i, X), o = await Promise.all(
-    t.sections.map(async (s) => await C(s))
+async function W(i) {
+  const t = j(i, Y), s = await Promise.all(
+    t.sections.map(async (o) => await C(o))
   );
-  return t.sections = o, t;
+  return t.sections = s, t;
 }
 async function C(i) {
-  const o = (await z(i.tag))(i);
-  return Array.isArray(o.children) && (o.children = await Promise.all(
-    o.children.map(async (s) => await C(s))
-  )), o;
+  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 E(i, t) {
   if (!(!t.sections || t.sections.length === 0)) {
-    for (const o of t.sections)
-      if (o.children) {
-        for (const s of o.children)
-          if (s.children) {
-            for (const e of s.children)
+    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 h = e.children[a];
-                  if (h.id === i.id)
+                  const n = e.children[a];
+                  if (n.id === i.id)
                     return { column: e, index: a };
-                  if (h.tag === "arcgis-nav-card") {
-                    const n = h.properties?.sections, r = E(i, {
-                      sections: n || []
+                  if (n.tag === "arcgis-nav-card") {
+                    const h = n.properties?.sections, r = E(i, {
+                      sections: h || []
                     });
                     if (r)
                       return r;
                   }
-                  if (f(h) && h.children) {
-                    const n = E(i, {
-                      sections: [{ children: [h] }]
+                  if (f(n) && n.children) {
+                    const h = E(i, {
+                      sections: [{ children: [n] }]
                     });
-                    if (n)
-                      return n;
+                    if (h)
+                      return h;
                   }
                 }
           }
       }
   }
 }
-class W extends x {
+class J extends x {
   constructor() {
     super(), this._messages = D({ blocking: !0 }), this.#t = P({ context: S }), this._layoutRef = _(), this._nodeControlsEl = _(), this._initShell = () => {
       const t = this.el;
@@ -143,6 +144,11 @@ class W extends x {
       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,
+        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);
   }
   static {
@@ -152,7 +158,7 @@ class W extends x {
     this.shadowRootOptions = A;
   }
   static {
-    this.styles = U;
+    this.styles = G;
   }
   get _context() {
     return M();
@@ -175,38 +181,38 @@ class W extends x {
     }, 250);
   }
   async _init() {
-    const t = await Y(this.layout);
+    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;
   }
   async _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: o, id: s, values: e, valid: a } = t.detail, h = l(this._layout), n = g(h, s);
-    if (n) {
-      const r = v(o, "editor.valuesOutCallback") || ((d) => d);
-      n.properties = r(e), this._layout = h, this._processedLayout = await this._validateAndProcess(h, 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();
+    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();
     }
   }
   async _handleLayoutNodeVisibilityChange(t) {
-    const { id: o } = t.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());
+    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());
   }
-  async _validateAndProcess(t, o) {
-    const s = q(t);
-    return this._layoutErrors = s, s.length > 0 && !this.debug && u.error("Layout validation errors:", s), await I(t, o, this._context);
+  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);
   }
   hitTest(t) {
-    let o = !1;
+    let s = !1;
     if (this._highlightedElement) {
-      const s = this._highlightedElement.getBoundingClientRect();
-      t.clientX >= s.left && t.clientX <= s.right && t.clientY >= s.top && t.clientY <= s.bottom && (o = !0);
+      const o = this._highlightedElement.getBoundingClientRect();
+      t.clientX >= o.left && t.clientX <= o.right && t.clientY >= o.top && t.clientY <= o.bottom && (s = !0);
     }
-    return o;
+    return s;
   }
   _handleNodeHighlight(t) {
     t.stopPropagation(), u.debug("NODE HIGHLIGHT EVENT >>>", t);
-    const o = t.detail.target, s = o.dataset.nodeId || "";
-    if (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}`);
+    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}`);
     }
   }
   _handleNodeUnHighlight(t) {
@@ -228,14 +234,14 @@ class W extends x {
   }
   async _handleLayoutAddNode(t) {
     u.debug("Add node event:", t.detail.config.tag);
-    const o = l(this._layout), { column: s, index: e } = E(t.detail.adjacentNode, o);
-    u.debug("Found column and index:", s, e);
+    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(),
       tag: t.detail.config.tag,
       properties: t.detail.config.defaults
     };
-    s.children?.splice(e + 1, 0, a), this._layout = o, this._processedLayout = await this._validateAndProcess(o, this.options), this._highlightedNode = a, await new Promise((h) => setTimeout(h, 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);
+    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);
   }
   renderEditToolbar() {
     let t;
@@ -257,7 +263,7 @@ class W extends x {
     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>`;
   }
 }
-w("arcgis-layout-container", W);
+w("arcgis-layout-container", J);
 export {
-  W as ArcgisLayoutContainer
+  J as ArcgisLayoutContainer
 };

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

@@ -7,7 +7,7 @@ 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.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 const c = o`calcite-navigation{border-block-start:1px solid var(--calcite-navigation-border-color, var(--calcite-color-border-3));[slot=content-end]{margin-inline-end:1rem}[slot=content-end]{display:flex}[slot=content-end]{gap:.75rem}}`;
 class u extends e {
   constructor() {

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

@@ -1,16 +1,16 @@
-import { c as n } from "../../chunks/runtime.js";
+import { c as r } 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 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";
+import { LitElement as c, createEvent as i } from "@arcgis/lumina";
+import { css as d } from "@lit/reactive-element/css-tag.js";
+import { cloneObject as u, getWithDefault as t, isNil as h, getProp as o } from "@esri/hub-common";
+import { g, i as f } from "../../chunks/interpolate-translations.js";
+import { i as m } from "../../chunks/isNodeVisible.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.13/esri/copyright.txt for details.
-v0.13.4 */
-const m = c`:host{position:absolute}`;
-class y extends r {
+v0.13.5 */
+const p = d`:host{position:absolute}`;
+class y extends c {
   constructor() {
     super(...arguments), this.isEditMode = !1, this.isLayoutValid = !0, this.hubTelemetry = i(), this.arcgisLayoutNodeEditorOpen = i(), this.arcgisLayoutNodeVisibilityChange = i();
   }
@@ -18,19 +18,22 @@ class y extends r {
     this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
   }
   static {
-    this.styles = m;
+    this.styles = p;
   }
   get _layoutNodeConfig() {
     if (!this.referenceElement || !this.node)
       return;
-    let e = h(this.referenceElement, this.node);
-    return e && (e = g(this.messages, e)), d(e);
+    let e = g(this.referenceElement, this.node);
+    return e && (e = f(this.messages, e)), u(e);
   }
   get _isNodeVisible() {
-    return f(this.node);
+    return m(this.node);
   }
   _onOpenEditorButtonClick() {
-    this.arcgisLayoutNodeEditorOpen.emit();
+    this.arcgisLayoutNodeEditorOpen.emit(), this.hubTelemetry.emit({
+      ...a.category.interaction.action.open.label.sidePanel,
+      details: this._layoutNodeConfig.name
+    });
   }
   _onToggleVisibilityClick() {
     this.arcgisLayoutNodeVisibilityChange.emit({
@@ -40,7 +43,7 @@ class y extends r {
     });
     const e = this._isNodeVisible ? "disable" : "enable";
     this.hubTelemetry.emit({
-      ...p.category.interaction.action[e].label.visibility,
+      ...a.category.interaction.action[e].label.visibility,
       details: this._layoutNodeConfig.name
     });
   }
@@ -48,16 +51,16 @@ class y extends r {
     const e = this._layoutNodeConfig;
     if (!e || !this.referenceElement)
       return null;
-    const a = this.messages.layoutNodeControls.a11yLabel || "", l = this.layoutNodeEditorRef ? {
+    const l = this.messages.layoutNodeControls.a11yLabel || "", n = this.layoutNodeEditorRef ? {
       extraContainers: [this.layoutNodeEditorRef]
     } : void 0;
-    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>`;
+    return s`<calcite-popover auto-close .focusTrapOptions=${n} offset-distance=0 .label=${l} 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=${h(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() || "";
   }
 }
-n("arcgis-layout-node-controls", y);
+r("arcgis-layout-node-controls", y);
 export {
   y as ArcgisLayoutNodeControls
 };

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

@@ -7,7 +7,7 @@ import { css as f } from "@lit/reactive-element/css-tag.js";
 import { ArcgisLayoutNodeEditorDynamicTag as C } from "./layout-node-editor-dynamic-tag/customElement.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 const p = f`@layer{arcgis-configuration-editor:focus{--focus-color: var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:solid 2px var(--focus-color)}}`;
 class m extends n {
   constructor() {
@@ -54,7 +54,7 @@ class m extends n {
       onInputChangeEvent: this._handleConfigurationEditorChange,
       [t]: this._values,
       ...this.layoutNodeConfig.editor.properties || {}
-    } }) : a`<arcgis-configuration-editor @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${g(this._configEditorRef)}></arcgis-configuration-editor>`;
+    } }) : a`<arcgis-configuration-editor @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${g(this._configEditorRef)}></arcgis-configuration-editor>`;
   }
   render() {
     return !this.node || !this.layoutNodeConfig ? a`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();

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

@@ -2,7 +2,7 @@ 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.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

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

@@ -16,4 +16,5 @@ export declare class ArcgisLayoutNodeHighlight extends LitElement {
     node?: LayoutNode;
     highlightedNode?: LayoutNode;
     readonly arcgisLayoutAddNode: TargetedEvent<this, ILayoutNodeAddEventDetail>;
+    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
 }

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

@@ -1,25 +1,25 @@
-import { c as g } from "../../chunks/runtime.js";
-import { LitElement as u, useContextConsumer as p, createEvent as m, noShadowRoot as f, nothing as n } from "@arcgis/lumina";
-import { css as b } from "@lit/reactive-element/css-tag.js";
-import { checkPermission as y, getProp as r, cloneObject as v, getWithDefault as N } from "@esri/hub-common";
+import { c as p } from "../../chunks/runtime.js";
+import { LitElement as m, useContextConsumer as b, createEvent as n, noShadowRoot as f, nothing as r } from "@arcgis/lumina";
+import { css as y } from "@lit/reactive-element/css-tag.js";
+import { checkPermission as v, getProp as d, cloneObject as N, getWithDefault as x } from "@esri/hub-common";
 import { html as a } from "lit";
-import { l as x } from "../../chunks/messagesContext.js";
-import { g as C, i as P } from "../../chunks/interpolate-translations.js";
-import { m as _, i as $ } from "../../chunks/memoizeAsync.js";
-import { dictionary as L } from "@esri/telemetry-dictionary-hub";
+import { l as P } from "../../chunks/messagesContext.js";
+import { g as C, i as _ } from "../../chunks/interpolate-translations.js";
+import { m as $, i as L } from "../../chunks/memoizeAsync.js";
+import { dictionary as c } from "@esri/telemetry-dictionary-hub";
 import { g as E } from "../../chunks/state.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
-const O = b`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-height: 30px;opacity:0;position:absolute;calcite-label{position:fixed;position-anchor:var(--anchor-element-name);inset-block:calc(anchor(top) - var(--label-height)) calc(anchor(top) + 2px);background-color:#fff;padding:2px 5px;border:solid 2px var(--calcite-ui-brand);border-bottom:none}calcite-button{position:fixed;position-anchor:var(--anchor-element-name);justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - var(--button-height) / 2)}.popover-content{max-height:19.3rem;overflow-y:auto}calcite-list-item{--calcite-list-border-color: transparent}}.current-node+arcgis-layout-node-highlight{opacity:1}}`, s = L.category.interaction.action.open.label.dialog.details.addLayoutNode, I = [
+v0.13.5 */
+const O = y`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-height: 30px;opacity:0;position:absolute;calcite-label{position:fixed;position-anchor:var(--anchor-element-name);inset-block:calc(anchor(top) - var(--label-height)) calc(anchor(top) + 2px);background-color:#fff;padding:2px 5px;border:solid 2px var(--calcite-ui-brand);border-bottom:none}calcite-button{position:fixed;position-anchor:var(--anchor-element-name);justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - var(--button-height) / 2)}.popover-content{max-height:19.3rem;overflow-y:auto}calcite-list-item{--calcite-list-border-color: transparent}}.current-node+arcgis-layout-node-highlight{opacity:1}}`, s = c.category.interaction.action.select.label.layoutNode, I = [
   {
     tag: "arcgis-text-card",
     label: "{{layoutNodeControls.configurableNodes.text.label:translate}}",
     icon: "text",
-    defaults: {
-      html: "<p>&nbsp;</p>"
-    },
-    telemetry: s
+    telemetry: {
+      ...s,
+      details: "Text card"
+    }
   },
   {
     tag: "arcgis-hub-image",
@@ -30,14 +30,20 @@ const O = b`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-he
       src: "https://placehold.co/300x200?text=Image",
       alt: "Placeholder image"
     },
-    telemetry: s
+    telemetry: {
+      ...s,
+      details: "Image card"
+    }
   },
   {
     tag: "arcgis-hub-embed-card",
     label: "{{layoutNodeControls.configurableNodes.embed.label:translate}}",
     icon: "embedded-content",
     disabled: !0,
-    telemetry: s
+    telemetry: {
+      ...s,
+      details: "Embed card"
+    }
   },
   {
     tag: "arcgis-hub-gallery-card",
@@ -64,7 +70,10 @@ const O = b`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-he
         }
       }
     },
-    telemetry: s
+    telemetry: {
+      ...s,
+      details: "Gallery card"
+    }
   }
   // {
   //   tag: "arcgis-hub-timeline",
@@ -82,20 +91,20 @@ const O = b`@layer{arcgis-layout-node-highlight{--button-height: 30px;--label-he
   //   icon: "entity-status-card-icon",
   // },
 ];
-async function w(d, e, t) {
-  let o = I.filter((l) => !l.permissions || l.permissions.length === 0 ? !0 : l.permissions.every((h) => y(h, t).access));
+async function w(h, e, t) {
+  let o = I.filter((l) => !l.permissions || l.permissions.length === 0 ? !0 : l.permissions.every((u) => v(u, t).access));
   const i = {
     context: t,
     entity: e.entity ?? {}
-  }, c = {
-    messages: r(e, "translations")
+  }, g = {
+    messages: d(e, "translations")
   };
-  return o = $(o, i, c), await Promise.resolve(o);
+  return o = L(o, i, g), await Promise.resolve(o);
 }
-const A = _(w);
-class S extends u {
+const A = $(w);
+class B extends m {
   constructor() {
-    super(), this.#e = p({ context: x }), this.isPopoverOpen = !1, this.arcgisLayoutAddNode = m(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
+    super(), this.#e = b({ context: P }), this.isPopoverOpen = !1, this.arcgisLayoutAddNode = n(), this.hubTelemetry = n(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
       this.isPopoverOpen = !0;
     }), this.listen("calcitePopoverClose", (e) => {
       this.isPopoverOpen = !1;
@@ -124,17 +133,20 @@ class S extends u {
     if (!this.referenceElement || !this.node)
       return;
     let e = C(this.referenceElement, this.node);
-    return e && (e = P(this._messages, e)), v(e);
+    return e && (e = _(this._messages, e)), N(e);
   }
   get _context() {
     return E();
   }
+  willUpdate(e) {
+    e.has("highlightedNode") && (!this.highlightedNode || this.node?.id !== this.highlightedNode.id) && (this.isPopoverOpen = !1);
+  }
   updated(e) {
     const t = `--overlay-anchor-${this.node?.id}`;
     this.el.style.setProperty("--anchor-element-name", t);
   }
-  willUpdate(e) {
-    e.has("highlightedNode") && (!this.highlightedNode || this.node?.id !== this.highlightedNode.id) && (this.isPopoverOpen = !1);
+  _handlePopoverOpen() {
+    this.hubTelemetry.emit(c.category.interaction.action.open.label.dialog.details.addLayoutNode);
   }
   async loadConfig() {
     this.config || (this.config = await A({}, { translations: this._messages }, this._context));
@@ -153,24 +165,24 @@ class S extends u {
   renderLabel() {
     let e;
     if (this.node !== void 0 && this.highlightedNode !== void 0 && this.node.id === this.highlightedNode.id) {
-      const t = N(this._layoutNodeConfig ?? {}, "i18n.label", r(this._messages, "layoutNodeControls.configurableNodes.default.label"));
+      const t = x(this._layoutNodeConfig ?? {}, "i18n.label", d(this._messages, "layoutNodeControls.configurableNodes.default.label"));
       e = a`<calcite-label scale=l>${t}</calcite-label>`;
     }
     return e;
   }
   renderControls() {
     let e;
-    return this.node && (e = a`<calcite-button icon-start=plus id=${this.addButtonId ?? n} .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
+    return this.node && (e = a`<calcite-button icon-start=plus id=${this.addButtonId ?? r} .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
   }
   renderPopover() {
     let e;
-    return this.node && this.addButtonId && (e = a`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} .open=${this.isPopoverOpen} .referenceElement=${this.addButtonId}><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => a`<calcite-list-item data-tag=${t.tag ?? n} .disabled=${t.disabled} icon-start=${t.icon ?? n} .label=${t.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
+    return this.node && this.addButtonId && (e = a`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} @calcitePopoverOpen=${this._handlePopoverOpen} .open=${this.isPopoverOpen} .referenceElement=${this.addButtonId}><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => a`<calcite-list-item data-tag=${t.tag ?? r} .disabled=${t.disabled} icon-start=${t.icon ?? r} .label=${t.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
   }
   render() {
     return a`${this.renderLabel()}${this.renderControls()}${this.renderPopover()}`;
   }
 }
-g("arcgis-layout-node-highlight", S);
+p("arcgis-layout-node-highlight", B);
 export {
-  S as ArcgisLayoutNodeHighlight
+  B as ArcgisLayoutNodeHighlight
 };

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

@@ -5,7 +5,7 @@ import { css as r } from "@lit/reactive-element/css-tag.js";
 import { u as n } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 const a = r`:host{display:flex;justify-content:center;align-items:center;position:fixed;position-area:center;width:anchor-size(width);height:anchor-size(height);anchor-name:--overlay;pointer-events:none;outline:1.5px dashed var(--calcite-color-border-1)}.overlay{opacity:.6;background-color:#ffffffa6;width:100%;height:100%}.overlay-content{position:fixed}`;
 class c extends s {
   constructor() {

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

@@ -8,7 +8,7 @@ import { spreadProps as p } from "@open-wc/lit-helpers";
 import { a as h } from "../../chunks/typeGuards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 class y extends d {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;

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

@@ -8,7 +8,7 @@ import { Logger as d } from "@esri/hub-common";
 import { spreadProps as c } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/0.13/esri/copyright.txt for details.
-v0.13.4 */
+v0.13.5 */
 class w extends u {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;