@esri/hub-web-components 0.33.0 → 0.34.0

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

@@ -1,42 +1,42 @@
-import { g as k, c as R } from "../../chunks/runtime.js";
-import { html as _ } from "lit-html";
+import { g as D, c as A } from "../../chunks/runtime.js";
+import { html as p } from "lit-html";
 import { keyed as w } from "lit-html/directives/keyed.js";
-import { LitElement as D, useContextProvider as I, createEvent as L, noShadowRoot as M } 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 V } from "@lit/reactive-element/css-tag.js";
-import { layoutNodeTags as x, cloneObject as f, findNodeById as m, 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 { LitElement as k, useContextProvider as I, createEvent as m, noShadowRoot as T } from "@arcgis/lumina";
+import { createRef as $, ref as x } from "lit/directives/ref.js";
+import { l as M } from "../../chunks/layoutContext.js";
+import { css as O } from "@lit/reactive-element/css-tag.js";
+import { layoutNodeTags as R, cloneObject as f, findNodeById as v, setProp as V, getProp as H, deepMerge as j, Logger as _, createId as B, getWithDefault as U } from "@esri/hub-common";
+import { g as z } from "../../chunks/state.js";
 import { p as F } from "../../chunks/processLayout.js";
-import { c as q, b, i as v, a as E } from "../../chunks/typeGuards.js";
+import { c as q, b as E, i as L, a as C } 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 P } from "@esri/telemetry-dictionary-hub";
+import { f as P } from "../../chunks/findColumnAndNodeIndex.js";
+import { dictionary as N } from "@esri/telemetry-dictionary-hub";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.0 */
-const Q = V`@layer{arcgis-layout-container{display:block;--offset-top: 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(--offset-top));arcgis-layout{margin-block-start:15px}calcite-panel>*{margin:1rem}calcite-panel>calcite-action.panel-close{margin:0}}}`;
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
+const Q = O`@layer{arcgis-layout-container{display:block;--offset-top: 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(--offset-top));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;
-    b(i) && (o = i.sectionProps?.[a]), v(i) && (o = i.rowProps?.[a]), E(i) && (o = i.columnProps?.[a]), typeof o == "number" ? (o < 0 || o > 12) && e.push(`Node "${i.id}": ${t} > ${a} out of range (0-12): ${o}`) : typeof o == "object" && Object.entries(o).forEach(([n, r]) => {
+    E(i) && (o = i.sectionProps?.[a]), L(i) && (o = i.rowProps?.[a]), C(i) && (o = i.columnProps?.[a]), typeof o == "number" ? (o < 0 || o > 12) && e.push(`Node "${i.id}": ${t} > ${a} out of range (0-12): ${o}`) : typeof o == "object" && Object.entries(o).forEach(([n, r]) => {
       typeof r == "number" && (r < 0 || r > 12) && e.push(`Node "${i.id}": ${t} > ${a}.${n} out of range (0-12): ${r}`);
     });
   }), 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(...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;
+  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)), (E(i) || L(i) || C(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 }) {
+function b({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
   if (i.tag === "arcgis-nav-card") {
     const o = i.properties;
     o && typeof o == "object" && Array.isArray(o.sections) && o.sections.forEach((r, c) => {
       const u = `${t}.sections[${c}]`;
-      N({
+      b({
         node: r,
         nodePath: u,
         idSet: s,
@@ -46,10 +46,10 @@ function N({ node: i, nodePath: t, idSet: s, validTags: e, errors: a }) {
     });
   }
   a.push(...Y(i, t, s, e)), Array.isArray(i.children) && i.children.forEach((o, n) => {
-    let r = `${t}.Child[${n}]`, c = Array.from(x);
-    b(i) ? (c = ["arcgis-layout-row"], r = `${t}.Row[${n}]`) : v(i) ? (c = ["arcgis-layout-column"], r = `${t}.Column[${n}]`) : E(i) && (c = Array.from(x).filter(
+    let r = `${t}.Child[${n}]`, c = Array.from(R);
+    E(i) ? (c = ["arcgis-layout-row"], r = `${t}.Row[${n}]`) : L(i) ? (c = ["arcgis-layout-column"], r = `${t}.Column[${n}]`) : C(i) && (c = Array.from(R).filter(
       (u) => u !== "arcgis-layout-column" && u !== "arcgis-layout-section"
-    )), N({
+    )), b({
       node: o,
       nodePath: r,
       idSet: s,
@@ -64,7 +64,7 @@ function Z(i) {
     if (q(e))
       return;
     const o = e, n = `Section[${a}]`;
-    N({
+    b({
       node: o,
       nodePath: n,
       idSet: s,
@@ -91,14 +91,14 @@ const et = {
 };
 async function st(i) {
   const t = K(i, et), s = await Promise.all(
-    t.sections.map(async (e) => await A(e))
+    t.sections.map(async (e) => await S(e))
   );
   return t.sections = s, t;
 }
-async function A(i) {
+async function S(i) {
   const s = (await tt(i.tag))(i);
   return Array.isArray(s.children) && (s.children = await Promise.all(
-    s.children.map(async (e) => await A(e))
+    s.children.map(async (e) => await S(e))
   )), s;
 }
 function ot(i, t) {
@@ -117,7 +117,7 @@ function rt(i, t) {
   if (t > 0)
     return i.sections[t - 1];
 }
-function dt(i, t) {
+function lt(i, t) {
   const s = f(t);
   function e(a) {
     for (let o = 0; o < a.sections.length; o++) {
@@ -129,36 +129,36 @@ function dt(i, t) {
             for (let u = 0; u < c.children.length; u++) {
               const h = c.children[u];
               if (h.children)
-                for (let l = 0; l < h.children.length; l++) {
-                  const y = h.children[l];
+                for (let d = 0; d < h.children.length; d++) {
+                  const y = h.children[d];
                   if (y.id === i.id)
-                    if (l > 0) {
-                      const d = h.children[l - 1];
-                      return h.children[l - 1] = h.children[l], h.children[l] = d, !0;
+                    if (d > 0) {
+                      const l = h.children[d - 1];
+                      return h.children[d - 1] = h.children[d], h.children[d] = l, !0;
                     } else {
                       if (u > 0)
-                        return h.children.splice(l, 1), c.children[u - 1].children?.push(i), !0;
+                        return h.children.splice(d, 1), c.children[u - 1].children?.push(i), !0;
                       if (r > 0) {
-                        h.children.splice(l, 1);
-                        const d = at(n, r);
-                        if (d?.children && d.children.length > 0)
-                          return d.children[d.children.length - 1].children?.push(i), !0;
+                        h.children.splice(d, 1);
+                        const l = at(n, r);
+                        if (l?.children && l.children.length > 0)
+                          return l.children[l.children.length - 1].children?.push(i), !0;
                       } else if (o > 0) {
-                        h.children.splice(l, 1);
-                        const d = rt(a, o);
-                        if (d?.children && d.children.length > 0) {
-                          const g = d.children[d.children.length - 1];
+                        h.children.splice(d, 1);
+                        const l = rt(a, o);
+                        if (l?.children && l.children.length > 0) {
+                          const g = l.children[l.children.length - 1];
                           if (g.children && g.children.length > 0)
                             return g.children[g.children.length - 1].children?.push(i), !0;
                         }
                       }
                     }
                   if (y.tag === "arcgis-nav-card") {
-                    const d = y.properties?.sections;
-                    if (d && e({ sections: d }))
+                    const l = y.properties?.sections;
+                    if (l && e({ sections: l }))
                       return !0;
                   }
-                  if (y.children && v(y) && e({ sections: [{ children: [y] }] }))
+                  if (y.children && L(y) && e({ sections: [{ children: [y] }] }))
                     return !0;
                 }
             }
@@ -168,7 +168,7 @@ function dt(i, t) {
   }
   return e(s), s;
 }
-function lt(i, t) {
+function dt(i, t) {
   const s = f(t);
   function e(a) {
     for (let o = 0; o < a.sections.length; o++) {
@@ -180,36 +180,36 @@ function lt(i, t) {
             for (let u = 0; u < c.children.length; u++) {
               const h = c.children[u];
               if (h.children)
-                for (let l = 0; l < h.children.length; l++) {
-                  const y = h.children[l];
+                for (let d = 0; d < h.children.length; d++) {
+                  const y = h.children[d];
                   if (y.id === i.id)
-                    if (l < h.children.length - 1) {
-                      const d = h.children[l + 1];
-                      return h.children[l + 1] = h.children[l], h.children[l] = d, !0;
+                    if (d < h.children.length - 1) {
+                      const l = h.children[d + 1];
+                      return h.children[d + 1] = h.children[d], h.children[d] = l, !0;
                     } else {
                       if (u < c.children.length - 1)
-                        return h.children.splice(l, 1), c.children[u + 1].children?.unshift(i), !0;
+                        return h.children.splice(d, 1), c.children[u + 1].children?.unshift(i), !0;
                       if (r < n.children.length - 1) {
-                        h.children.splice(l, 1);
-                        const d = ot(n, r);
-                        if (d?.children && d.children.length > 0)
-                          return d.children[0].children?.unshift(i), !0;
+                        h.children.splice(d, 1);
+                        const l = ot(n, r);
+                        if (l?.children && l.children.length > 0)
+                          return l.children[0].children?.unshift(i), !0;
                       } else if (o < a.sections.length - 1) {
-                        h.children.splice(l, 1);
-                        const d = nt(a, o);
-                        if (d?.children && d.children.length > 0) {
-                          const g = d.children[0];
+                        h.children.splice(d, 1);
+                        const l = nt(a, o);
+                        if (l?.children && l.children.length > 0) {
+                          const g = l.children[0];
                           if (g.children && g.children.length > 0)
                             return g.children[0].children?.unshift(i), !0;
                         }
                       }
                     }
                   if (y.tag === "arcgis-nav-card") {
-                    const d = y.properties?.sections;
-                    if (d && e({ sections: d }))
+                    const l = y.properties?.sections;
+                    if (l && e({ sections: l }))
                       return !0;
                   }
-                  if (y.children && v(y) && e({ sections: [{ children: [y] }] }))
+                  if (y.children && L(y) && e({ sections: [{ children: [y] }] }))
                     return !0;
                 }
             }
@@ -235,9 +235,9 @@ function ct(i, t) {
   }
   return e(i), s;
 }
-class ht extends D {
+class ht extends k {
   constructor() {
-    super(), this._messages = J({ blocking: !0 }), this.#t = I({ 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 = $(), this._layoutNodeEditorRef = $(), this._handleExitEditMode = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutEditorExit.emit();
     }, this._handlePublishLayout = async (t) => {
       t.stopPropagation(), this.arcgisHubLayoutPublished.emit({
@@ -246,6 +246,14 @@ class ht extends D {
           this._isLayoutDirty = !1;
         }
       });
+    }, this._resetLayout = async (t) => {
+      t.stopPropagation(), this._isConfirmResetDialogOpen = !0, this.hubTelemetry.emit(N.category.interaction.action.open.label.modal.details.resetToDefault);
+    }, this._confirmResetLayout = () => {
+      this._hideConfirmResetDialog(), this.arcgisHubLayoutReset.emit({
+        successCallback: () => {
+          this._isLayoutDirty = !0, this.hubTelemetry.emit(N.category.interaction.action.select.label.layout.details.default);
+        }
+      });
     }, this._handleCloseEditPanel = async () => {
       if (this._isNodeDirty && !this._isLayoutValid) {
         if (!window.confirm(this._messages.invalidDirtyStateMessage))
@@ -253,7 +261,7 @@ class ht extends D {
         await this._updateLayoutNode(this._nodeBeforeEdit.id, "properties", this._nodeBeforeEdit.properties, void 0, !0);
       }
       this._isEditPanelOpen = !1, this._nodeBeforeEdit = void 0, this.hubTelemetry.emit({
-        ...P.category.interaction.action.close.label.sidePanel,
+        ...N.category.interaction.action.close.label.sidePanel,
         details: this._layoutNodeEditorConfig?.layoutNodeConfig?.name || "unknown"
       });
     }, this._setlayoutNodeEditorRef = async (t) => {
@@ -261,7 +269,7 @@ class ht extends D {
         ...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._isConfirmResetDialogOpen = !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 = m(), this.arcgisHubLayoutEditorExit = m(), this.arcgisHubLayoutPublished = m(), this.arcgisHubLayoutReset = m(), this.hubTelemetry = m(), this.listen("arcgisLayoutActivateNode", (t) => {
       this._handleNodeActivate(t);
     }), this.listen("arcgisLayoutDeactivateNode", (t) => {
       this._handleNodeDeactivate(t);
@@ -278,20 +286,20 @@ class ht extends D {
     }), this.listen("arcgisLayoutDeleteNode", async (t) => await this._handleLayoutDeleteNode(t)), this.listenOn(window, "resize", this._initShell);
   }
   static {
-    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 };
+    this.properties = { _isConfirmResetDialogOpen: 16, _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 = M;
+    this.shadowRootOptions = T;
   }
   static {
     this.styles = Q;
   }
   get _context() {
-    return B();
+    return z();
   }
   get _layoutContext() {
     return {
-      assetPath: k("assets/layout-container/"),
+      assetPath: D("assets/layout-container/"),
       messages: this._messages,
       layout: this._processedLayout,
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -309,6 +317,9 @@ class ht extends D {
       e.lazy = !1;
     })), (!this.hasUpdated || t.has("_processedLayout") || t.has("_isLayoutValid")) && this.#t.setValue(this._layoutContext);
   }
+  _hideConfirmResetDialog() {
+    this._isConfirmResetDialogOpen = !1;
+  }
   async _initShell() {
     const t = this.el;
     t.style.setProperty("--offset-top", `${t.offsetTop}px`);
@@ -327,11 +338,11 @@ class ht extends D {
     await this.updateComplete, this._liveAnnouncement = t;
   }
   async _updateLayoutNode(t, s, e, a, o, n) {
-    const r = f(this._layout), c = m(r, t);
-    c && (O(s, e, c), a && (r.variables = {
+    const r = f(this._layout), c = v(r, t);
+    c && (V(s, e, c), 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());
+    }), this._layout = r, this._processedLayout = await this._validateAndProcess(r, this.options), this._activatedNode = v(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());
   }
   _handleNodeActivate(t) {
     const { node: s } = t.detail;
@@ -341,9 +352,9 @@ class ht extends D {
     t.detail.node.id === this._activatedNode?.id && (this._activatedNode = void 0);
   }
   async _handleLayoutNodeEditorChange(t) {
-    const { layoutNodeConfig: s, id: e, values: a, valid: o } = t.detail, n = m(this._layout, e);
+    const { layoutNodeConfig: s, id: e, values: a, valid: o } = t.detail, n = v(this._layout, e);
     if (n) {
-      const c = (H(s, "editor.valuesOutCallback") || ((l) => l))(a, { nodeId: e, valid: o }), u = c.variables;
+      const c = (H(s, "editor.valuesOutCallback") || ((d) => d))(a, { nodeId: e, valid: o }), u = c.variables;
       delete c.variables;
       const h = n.properties || {};
       n.properties = j(h, c), await this._updateLayoutNode(e, "properties", n.properties, u, o, () => {
@@ -352,14 +363,14 @@ class ht extends D {
     }
   }
   async _handleLayoutNodeVisibilityChange(t) {
-    const { id: s } = t.detail, e = m(this._layout, s);
+    const { id: s } = t.detail, e = v(this._layout, s);
     e && (e.visibility || (e.visibility = { kind: "static", isHidden: !1 }), e.visibility.kind === "static" && await this._updateLayoutNode(s, "visibility", { ...e.visibility, isHidden: !e.visibility.isHidden }, void 0, !0, () => {
       this.arcgisHubLayoutChanged.emit();
     }));
   }
   async _validateAndProcess(t, s) {
     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);
+    return this._layoutErrors = e, e.length > 0 && !this.debug && _.error("Layout validation errors:", e), await F(t, { ...s }, this._context);
   }
   _handleLayoutNodeEditorOpen(t) {
     const { node: s, element: e } = t.detail;
@@ -374,49 +385,52 @@ class ht extends D {
     }, 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 } = S(t.detail.adjacentNode, s);
-    p.debug("Found column and index:", e, a);
+    _.debug("Add node event:", t.detail.config.tag);
+    const s = f(this._layout), { column: e, index: a } = P(t.detail.adjacentNode, s);
+    _.debug("Found column and index:", e, a);
     const o = {
-      id: U(),
+      id: B(),
       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(), this.hubTelemetry.emit({
-      ...P.category.interaction.action.select.label.layoutNode,
+      ...N.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 = 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();
+    _.debug("Reposition node event:", t.detail.node.id, t.detail.direction), this._activatedNode = void 0, t.detail.direction === "up" ? (_.debug("Moving node up..."), this._layout = lt(t.detail.node, this._layout)) : (_.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();
   }
   async _handleLayoutDeleteNode(t) {
-    p.debug("Delete node event:", t.detail.id);
-    const { id: s } = t.detail, e = f(this._layout), a = m(e, s);
+    _.debug("Delete node event:", t.detail.id);
+    const { id: s } = t.detail, e = f(this._layout), a = v(e, s);
     if (a) {
-      const { column: o, index: n } = S(a, e);
+      const { column: o, index: n } = P(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();
     }
   }
   renderEditToolbar() {
     let t;
-    return this.isEditMode && (t = _`<arcgis-layout-editor-toolbar .exitEditMode=${this._handleExitEditMode} .isLayoutDirty=${this._isLayoutDirty} .isLayoutValid=${this._isLayoutValid} .isPublishing=${this.isPublishing} .publishLayout=${this._handlePublishLayout} slot=header></arcgis-layout-editor-toolbar>`), t;
+    return this.isEditMode && (t = p`<arcgis-layout-editor-toolbar .exitEditMode=${this._handleExitEditMode} .isLayoutDirty=${this._isLayoutDirty} .isLayoutValid=${this._isLayoutValid} .isPublishing=${this.isPublishing} .publishLayout=${this._handlePublishLayout} .resetLayout=${this._resetLayout} slot=header></arcgis-layout-editor-toolbar>`), t;
   }
   renderEditor() {
     let t;
     if (this.isEditMode) {
       const s = this._layoutNodeEditorConfig;
-      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>`;
+      t = p`<calcite-shell-panel .collapsed=${!this._isEditPanelOpen} position=end slot=panel-end><calcite-panel .heading=${U(s || {}, "layoutNodeConfig.i18n.label", this._messages.configurableNodes.default.label)} id=editor-panel ${x(this._setlayoutNodeEditorRef)}>${s?.layoutNodeConfig?.editor && p`<calcite-action class="panel-close" icon=x @click=${this._handleCloseEditPanel} slot=header-actions-end .text=${this._messages.close}></calcite-action>${w(s.layoutNode.id, p`<arcgis-layout-node-editor .layoutNodeConfig=${s.layoutNodeConfig} .node=${s.layoutNode}></arcgis-layout-node-editor>`)}` || ""}</calcite-panel></calcite-shell-panel>`;
     }
     return t;
   }
+  renderConfirmResetDialog() {
+    return p`<calcite-dialog .heading=${this._messages.resetLayout.heading} modal @calciteDialogClose=${this._hideConfirmResetDialog} .open=${this._isConfirmResetDialogOpen} scale=s slot=dialogs><div>${this._messages.resetLayout.message}</div><calcite-button appearance=outline @click=${this._hideConfirmResetDialog} round slot=footer-end>${this._messages.resetLayout.cancelButton}</calcite-button><calcite-button @click=${this._confirmResetLayout} round slot=footer-end>${this._messages.resetLayout.confirmButton}</calcite-button></calcite-dialog>`;
+  }
   render() {
-    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>`;
+    return p`<calcite-shell>${w("aria-live-region", p`<div aria-atomic=true aria-live=polite id=arcgis-layout-container-edit-mode-live-region>${this._liveAnnouncement}</div>`)}${this.renderEditToolbar()}${this.renderEditor()}<arcgis-layout .activatedNode=${this._activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .layout=${this._processedLayout} .options=${this.options} ${x(this._layoutRef)}></arcgis-layout>${this.renderConfirmResetDialog()}</calcite-shell>`;
   }
 }
-R("arcgis-layout-container", ht);
+A("arcgis-layout-container", ht);
 export {
   ht as ArcgisLayoutContainer
 };

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

@@ -3,6 +3,8 @@ 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-dialog";
+import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-shell";
 import "../arcgis-layout/index.js";
 export * from "./customElement.js";

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

@@ -3,6 +3,8 @@ 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-dialog";
+import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-shell";
 import "../arcgis-layout/index.js";
 export * from "./customElement.js";

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

@@ -1,5 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
 
 /** @private */
 export declare class ArcgisLayoutEditorToolbar extends LitElement {
@@ -7,6 +8,7 @@ export declare class ArcgisLayoutEditorToolbar extends LitElement {
     exitEditMode: ((event: MouseEvent) => Promise<void>) | undefined;
     /** Callback fired when the "Publish" button is clicked. */
     publishLayout: ((event: MouseEvent) => Promise<void>) | undefined;
+    resetLayout: ((event: MouseEvent) => Promise<void>) | undefined;
     /**
      * Whether the layout has unsaved changes.
      * We use this to determine the state and

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

@@ -1,40 +1,44 @@
 import { c as i } from "../../chunks/runtime.js";
-import { html as s } from "lit-html";
-import { LitElement as o } from "@arcgis/lumina";
-import { css as e } from "@lit/reactive-element/css-tag.js";
-import { u as a } from "../../chunks/useT9n.js";
+import { html as e } from "lit-html";
+import { LitElement as s, useContextConsumer as o } from "@arcgis/lumina";
+import { css as a } from "@lit/reactive-element/css-tag.js";
 import { focusElement as l } from "@arcgis/toolkit/dom";
 import { createRef as r, ref as n } from "lit/directives/ref.js";
+import { l as c } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.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 {
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
+const d = a`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 u extends s {
   constructor() {
-    super(...arguments), this._messages = a(), this._exitButtonRef = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
+    super(...arguments), this.#t = o({ context: c }), this._exitButtonRef = r(), this.isLayoutDirty = !1, this.isLayoutValid = !0, this.isPublishing = !1;
   }
   static {
-    this.properties = { exitEditMode: 0, publishLayout: 0, isLayoutDirty: 5, isLayoutValid: 5, isPublishing: 5 };
+    this.properties = { exitEditMode: 0, publishLayout: 0, resetLayout: 0, isLayoutDirty: 5, isLayoutValid: 5, isPublishing: 5 };
   }
   static {
-    this.styles = c;
+    this.styles = d;
+  }
+  #t;
+  get _messages() {
+    return this.#t.value.messages;
   }
   get _isPublishDisabled() {
     return this.isPublishing || !this.isLayoutDirty || !this.isLayoutValid;
   }
-  get _disalbedPublishTooltip() {
+  get _disabledPublishTooltip() {
     let t;
-    return this.isLayoutDirty || (t = this._messages.noChanges), this.isLayoutValid || (t = this._messages.invalidLayout), t;
+    return this.isLayoutDirty || (t = this._messages.toolbar.noChanges), this.isLayoutValid || (t = this._messages.toolbar.invalidLayout), t;
   }
   loaded() {
     l(this._exitButtonRef.value);
   }
   render() {
-    const t = this._messages.exit;
-    return s`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${n(this._exitButtonRef)}></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>`;
+    const t = this._messages.toolbar.exit;
+    return e`<calcite-navigation><calcite-action .label=${t} @click=${this.exitEditMode} scale=l slot=content-start .text=${t} text-enabled ${n(this._exitButtonRef)}></calcite-action><div slot=content-end><arcgis-ref-tooltip .isSlottedElDisabled=${this._isPublishDisabled} .text=${this._disabledPublishTooltip}><calcite-button .disabled=${this._isPublishDisabled} .loading=${this.isPublishing} @click=${this.publishLayout} round>${this._messages.toolbar.publish}</calcite-button></arcgis-ref-tooltip><calcite-dropdown offset-distance=5><calcite-button appearance=transparent icon-start=ellipsis .label=${this._messages.toolbar.moreOptions} round scale=m slot=trigger></calcite-button><calcite-dropdown-group selection-mode=none><calcite-dropdown-item .label=${this._messages.toolbar.resetLabel} @click=${this.resetLayout}>${this._messages.toolbar.resetLabel}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></div></calcite-navigation>`;
   }
 }
-i("arcgis-layout-editor-toolbar", d);
+i("arcgis-layout-editor-toolbar", u);
 export {
-  d as ArcgisLayoutEditorToolbar
+  u as ArcgisLayoutEditorToolbar
 };

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

@@ -2,4 +2,7 @@ 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";
+import "@esri/calcite-components/components/calcite-dropdown";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 export * from "./customElement.js";

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

@@ -2,4 +2,7 @@ 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";
+import "@esri/calcite-components/components/calcite-dropdown";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 export * from "./customElement.js";

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

@@ -8,8 +8,8 @@ import { dictionary as a } from "@esri/telemetry-dictionary-hub";
 import { f as c } from "../../chunks/findColumnAndNodeIndex.js";
 import { l as y } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.0 */
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
 const m = g`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
 class b extends h {
   constructor() {

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

@@ -7,8 +7,8 @@ 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 v } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.0 */
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.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() {

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.33/esri/copyright.txt for details.
-v0.33.0 */
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

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

@@ -10,8 +10,8 @@ import { slotChangeGetAssignedElements as x } from "@arcgis/toolkit/dom";
 import { i as C } from "../../chunks/isNodeVisible.js";
 import { html as i } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.0 */
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
 const $ = p`#card-label{position:fixed;position-anchor:--highlight-anchor;inset-block-end:calc(anchor(top) + 3px);inset-inline-start:calc(anchor(left) - 3px);background-color:#fff;border:solid 1px var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius);font-size:var(--calcite-font-size--2);line-height:var(--calcite-font-line-height-fixed-sm);font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);box-shadow:0 0 16px #00000029}#aria-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#overlay{position:absolute;position-anchor:--highlight-anchor;position-area:center;width:anchor-size(width);height:anchor-size(height);display:flex;justify-content:center;align-items:center}#overlay.hidden{background-color:#fff6;outline:1.5px dashed var(--calcite-color-border-1);calcite-chip{opacity:1}}#add-button{position:fixed;position-anchor:--highlight-anchor;justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - 15px);z-index:2}.slot-container{display:flex;flex:1;min-width:0;anchor-name:--highlight-anchor}:host{--calcite-popover-border-color: #dedede;--calcite-popover-corner-radius: 4px;#card-label,calcite-button{opacity:0}display:flex}::slotted(*){flex:1;min-width:0}#overlay:focus-visible{outline:none}:host([is-edit-mode]):has(.is-focused){#card-label{opacity:1}}:host([is-edit-mode]:not([activated],[has-nav-card]):hover),:host([is-edit-mode]:not([activated],[has-nav-card]):focus){--calcite-internal-color-focus: var(--calcite-color-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:var(--calcite-border-width-sm);#card-label,calcite-button{opacity:1}}:host([is-edit-mode][activated]:not([has-nav-card])){--calcite-internal-color-focus: var(--calcite-color-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:var(--calcite-border-width-md)}.popover-content{max-height:19.3rem;overflow-y:auto;border-radius:var(--calcite-popover-corner-radius)}calcite-list-item{--calcite-list-border-color: transparent}`;
 function _(l = {}, e) {
   const t = g(l);

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

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

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

@@ -7,8 +7,8 @@ import { g as c } from "../../chunks/getResponsiveClasses.js";
 import { Logger as a } from "@esri/hub-common";
 import { spreadProps as w } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.33/esri/copyright.txt for details.
-v0.33.0 */
+See https://js.arcgis.com/0.34/esri/copyright.txt for details.
+v0.34.0 */
 class y extends l {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;