@esri/hub-web-components 0.2.1 → 0.3.0

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

@@ -1,12 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { ILayout, ILayoutNode, IProcessLayoutOptions } from '../layouts/types';
+import { ILayoutNode, IProcessLayoutOptions, HTMLConfigurableLayoutNodeElement, Layout, ILayout } from '../layouts/types';
 import { getLayoutNodeConfig } from '../layouts/utils/getLayoutNodeConfig';
 import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
 
 export declare class ArcgisLayoutContainer extends LitElement {
     /** The layout to render */
-    layout: ILayout;
+    layout: Layout;
     /** @default false */
     debug: boolean;
     /**

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

@@ -1,17 +1,18 @@
-import { c as v } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
-import { LitElement as C, noShadowRoot as S } from "@arcgis/lumina";
-import { createRef as f, ref as x } from "lit/directives/ref.js";
+import { c as C } from "../../chunks/runtime.js";
+import { html as u } from "lit-html";
+import { LitElement as S, noShadowRoot as w } from "@arcgis/lumina";
+import { createRef as _, ref as x } from "lit/directives/ref.js";
 import { css as k } from "@lit/reactive-element/css-tag.js";
-import { cloneObject as d, deepFindById as p, Logger as c } from "@esri/hub-common";
-import { g as w, p as M } from "../../chunks/processLayout.js";
-import { c as A, b as I, i as T, a as O } from "../../chunks/typeGuards.js";
-import { g as P, i as R } from "../../chunks/interpolate-translations.js";
-import { u as U } from "../../chunks/useT9n.js";
+import { cloneObject as l, deepFindById as m, getProp as M, Logger as c } from "@esri/hub-common";
+import { g as A, p as T } from "../../chunks/processLayout.js";
+import { c as O, b as P, i as I, a as R } from "../../chunks/typeGuards.js";
+import { g as U, i as V } from "../../chunks/interpolate-translations.js";
+import { u as j } from "../../chunks/useT9n.js";
+import { migrateSchema as F } from "@esri/hub-components";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
-const j = k`@layer{arcgis-layout-container{display:block;--offsetTop: 0px;calcite-shell{position:static;font-size:inherit}}arcgis-layout-container[is-edit-mode]{height:calc(100vh - var(--offsetTop));calcite-navigation{--calcite-navigation-background-color: #fef9db;[slot=content-end]{margin-right:1rem}}calcite-shell-panel>*{margin:1rem}}}`, V = [
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
+const z = k`@layer{arcgis-layout-container{display:block;--offsetTop: 0px;calcite-shell{position:static;font-size:inherit}}arcgis-layout-container[is-edit-mode]{height:calc(100vh - var(--offsetTop));calcite-navigation{--calcite-navigation-background-color: #fef9db;[slot=content-end]{margin-right:1rem}}calcite-panel>*{margin:1rem}}}`, q = [
   "arcgis-layout-section",
   "arcgis-layout-row",
   "arcgis-layout-column",
@@ -20,9 +21,6 @@ const j = k`@layer{arcgis-layout-container{display:block;--offsetTop: 0px;calcit
   "calcite-avatar",
   "arcgis-text-card",
   "arcgis-hub-gallery-card",
-  // TODO: remove this tag once the arcgis-hub-gallery-card
-  // supports items (Caleb should be merghing soon)
-  "arcgis-hub-item-gallery-card",
   "arcgis-hub-image",
   "arcgis-hub-embed-card",
   "arcgis-nav-card",
@@ -31,56 +29,84 @@ const j = k`@layer{arcgis-layout-container{display:block;--offsetTop: 0px;calcit
   "arcgis-hub-catalog",
   "div"
 ];
-function z(i, t) {
-  const o = ["order", "offset", "width"], s = [];
-  return o.forEach((r) => {
-    let e;
-    I(i) && (e = i.sectionProps?.[r]), T(i) && (e = i.rowProps?.[r]), O(i) && (e = i.columnProps?.[r]), typeof e == "number" ? (e < 0 || e > 12) && s.push(`Node "${i.id}": ${t} > ${r} out of range (0-12): ${e}`) : typeof e == "object" && Object.entries(e).forEach(([n, a]) => {
-      typeof a == "number" && (a < 0 || a > 12) && s.push(`Node "${i.id}": ${t} > ${r}.${n} out of range (0-12): ${a}`);
+function D(i, t) {
+  const e = ["order", "offset", "width"], s = [];
+  return e.forEach((a) => {
+    let o;
+    P(i) && (o = i.sectionProps?.[a]), I(i) && (o = i.rowProps?.[a]), R(i) && (o = i.columnProps?.[a]), typeof o == "number" ? (o < 0 || o > 12) && s.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) && s.push(`Node "${i.id}": ${t} > ${a}.${n} out of range (0-12): ${r}`);
     });
   }), s;
 }
-function h(i, t, o, s, r = !0) {
-  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)), i.tag && !s.includes(i.tag) && e.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), e.push(...z(i, t)), r && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && e.push(`Node "${i.id}": ${t} > missing or empty children array.`), e;
+function y(i, t, e, s, a = !0) {
+  const o = [];
+  return i.id || o.push(`${t} > missing required id.`), i.tag || o.push(`${t} > missing required tag.`), i.id && (e.has(i.id) && o.push(`Node "${i.id}": ${t} > duplicate id: "${i.id}"`), e.add(i.id)), i.tag && !s.includes(i.tag) && o.push(`Node "${i.id}": ${t} > has invalid tag: ${i.tag}`), o.push(...D(i, t)), a && (!i.children || !Array.isArray(i.children) || i.children.length === 0) && o.push(`Node "${i.id}": ${t} > missing or empty children array.`), o;
 }
-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, r) => {
-    A(s) && t.push(`Section[${r}] is a reference and cannot be a direct child.`);
-    const e = s, n = `Section[${r}]`;
-    t.push(...h(e, n, o, ["arcgis-layout-section"])), (e.children ?? []).forEach((a, m) => {
-      const u = `${n}.Row[${m}]`;
-      t.push(...h(a, u, o, ["arcgis-layout-row"])), (a.children ?? []).forEach((y, E) => {
-        const g = `${u}.Column[${E}]`;
-        t.push(...h(y, g, o, ["arcgis-layout-column"])), (y.children ?? []).forEach((N, $) => {
-          const b = `${g}.Child[${$}]`, L = V.filter(
-            (_) => _ !== "arcgis-layout-column" && _ !== "arcgis-layout-section"
+function B(i) {
+  const t = [], e = /* @__PURE__ */ new Set();
+  return i ? typeof i != "object" ? (t.push("Layout must be an object."), t) : !i.sections.length || !Array.isArray(i.sections) ? (t.push("Layout must have a sections array."), t) : (i.sections.forEach((s, a) => {
+    O(s) && t.push(`Section[${a}] is a reference and cannot be a direct child.`);
+    const o = s, n = `Section[${a}]`;
+    t.push(...y(o, n, e, ["arcgis-layout-section"])), (o.children ?? []).forEach((r, d) => {
+      const h = `${n}.Row[${d}]`;
+      t.push(...y(r, h, e, ["arcgis-layout-row"])), (r.children ?? []).forEach((g, N) => {
+        const f = `${h}.Column[${N}]`;
+        t.push(...y(g, f, e, ["arcgis-layout-column"])), (g.children ?? []).forEach(($, b) => {
+          const L = `${f}.Child[${b}]`, v = q.filter(
+            (p) => p !== "arcgis-layout-column" && p !== "arcgis-layout-section"
           );
-          t.push(...h(N, b, o, L, !1));
+          t.push(...y($, L, e, v, !1));
         });
       });
     });
   }), t) : (t.push("Layout must be defined."), t);
 }
-class D extends C {
+async function G(i) {
+  switch (i) {
+    case "arcgis-text-card":
+      return (await import("../../chunks/migrateTextCard.js")).migrateTextCard;
+    // ...other cases...
+    default:
+      return ((t) => t);
+  }
+}
+function H(i) {
+  const t = l(i);
+  return t.schemaVersion = 2, t;
+}
+const Y = {
+  2: H
+};
+async function J(i) {
+  const t = F(i, Y), e = await Promise.all(
+    t.sections.map(async (s) => await E(s))
+  );
+  return t.sections = e, t;
+}
+async function E(i) {
+  const e = (await G(i.tag))(i);
+  return Array.isArray(e.children) && (e.children = await Promise.all(
+    e.children.map(async (s) => await E(s))
+  )), e;
+}
+class K extends S {
   constructor() {
-    super(), this._messages = U(), this._nodeControlsEl = f(), this._initShell = () => {
+    super(), this._messages = j(), this._nodeControlsEl = _(), this._initShell = () => {
       const t = this.el;
       t.style.setProperty("--offsetTop", `${t.offsetTop}px`);
-    }, this._layoutNodeEditor = f(), this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this.debug = !1, this.isEditMode = !1, this.options = {}, this.listen("arcgisLayoutNodeChange", async (t) => await this._handleLayoutNodeEditorChange(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);
+    }, this._layoutNodeEditor = _(), this._layoutErrors = [], this._historyStack = [], this._historyIdx = -1, this.debug = !1, this.isEditMode = !1, this.options = {}, this.listen("arcgisLayoutNodeChange", async (t) => await this._handleLayoutNodeEditorChange(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);
   }
   static {
     this.properties = { _processedLayout: 16, _layoutErrors: 16, _currentNode: 16, _currentElement: 16, _layoutNodeEditorConfig: 16, _historyStack: 16, _historyIdx: 16, layout: 0, debug: 7, isEditMode: 7, options: 0 };
   }
   static {
-    this.shadowRootOptions = S;
+    this.shadowRootOptions = w;
   }
   static {
-    this.styles = j;
+    this.styles = z;
   }
   get _context() {
-    return w();
+    return A();
   }
   get _canUndo() {
     return this._historyIdx > 0;
@@ -95,31 +121,32 @@ class D extends C {
     (t.has("layout") || t.has("options")) && this._init();
   }
   async _init() {
-    this._layout = d(this.layout), this._processedLayout = await this._validateAndProcess(this._layout, this.options), this._historyStack = [this._processedLayout], this._historyIdx = 0;
+    const t = await J(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 { nodeConfig: o, id: s, values: r } = t.detail, e = d(this._layout), n = p(e, s);
+    const { layoutNodeConfig: e, id: s, values: a } = t.detail, o = l(this._layout), n = m(o, s);
     if (n) {
-      const a = o.valuesProp;
-      n.properties && a ? n.properties[a] = r : n.properties = r, this._layout = e, this._processedLayout = await this._validateAndProcess(e, 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;
+      const r = e.valuesProp, d = M(e, "editor.valuesOutCallback") || ((h) => h);
+      n.properties && r ? n.properties[r] = d(a) : n.properties = d(a), this._layout = o, this._processedLayout = await this._validateAndProcess(o, 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;
     }
   }
-  async _validateAndProcess(t, o) {
-    const s = q(t);
-    return this._layoutErrors = s, s.length > 0 && !this.debug && c.error("Layout validation errors:", s), await M(t, o, this._context);
+  async _validateAndProcess(t, e) {
+    const s = B(t);
+    return this._layoutErrors = s, s.length > 0 && !this.debug && c.error("Layout validation errors:", s), await T(t, e, this._context);
   }
   _handleNodeMouseEnter(t) {
     t.stopPropagation(), c.debug("MOUSE OVER EVENT >>>", t);
-    const o = t.detail, s = o.dataset.nodeId || "";
+    const e = t.detail, s = e.dataset.nodeId || "";
     if (s) {
-      const r = p(this._processedLayout, s);
-      r ? this._currentNode !== r && this._currentElement !== o && (this._currentNode = r, this._currentElement = o) : c.warn(`No node found for target with id ${s}`);
+      const a = m(this._processedLayout, s);
+      a ? this._currentNode !== a && this._currentElement !== e && (this._currentNode = a, this._currentElement = e) : c.warn(`No node found for target with id ${s}`);
     }
   }
   _handleNodeMouseLeave(t) {
     t.stopPropagation(), c.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);
+    const e = t.detail;
+    !this._nodeControlsEl.value.matches(":hover") && this._currentElement === e && (this._currentNode = void 0, this._currentElement = void 0);
   }
   _handleNodeControlsMouseOut() {
     this._currentElement?.matches(":hover") || (this._currentNode = void 0, this._currentElement = void 0);
@@ -127,10 +154,10 @@ class D extends C {
   _handleLayoutNodeEditorOpen() {
     if (!this._currentElement || !this._currentNode)
       return;
-    let t = P(this._currentElement, this._currentNode);
-    t && (t = R(this._messages, t)), this._layoutNodeEditorConfig = {
-      layoutNodeConfig: d(t),
-      layoutNode: d(this._currentNode)
+    let t = U(this._currentElement, this._currentNode);
+    t && (t = V(this._messages, t)), this._layoutNodeEditorConfig = {
+      layoutNodeConfig: l(t),
+      layoutNode: l(this._currentNode)
     };
   }
   _undoLastAction() {
@@ -144,25 +171,25 @@ class D extends C {
   }
   renderEditToolbar() {
     let t;
-    return this.isEditMode && (t = l`<calcite-navigation slot=header><calcite-navigation-logo heading="Editing enabled" slot=logo></calcite-navigation-logo><div slot=content-end><calcite-action-group layout=horizontal><calcite-action appearance=transparent .disabled=${!this._canUndo} icon=undo @click=${() => this._undoLastAction()} scale=l text=undo></calcite-action><calcite-action appearance=transparent .disabled=${!this._canRedo} icon=redo @click=${() => this._redoLastAction()} scale=l text=redo></calcite-action></calcite-action-group><calcite-button @click=${async () => await this._handleLayoutSave()} round>Save</calcite-button></div></calcite-navigation>`), t;
+    return this.isEditMode && (t = u`<calcite-navigation slot=header><calcite-navigation-logo heading="Editing enabled" slot=logo></calcite-navigation-logo><div slot=content-end><calcite-action-group layout=horizontal><calcite-action appearance=transparent .disabled=${!this._canUndo} icon=undo @click=${() => this._undoLastAction()} scale=l text=undo></calcite-action><calcite-action appearance=transparent .disabled=${!this._canRedo} icon=redo @click=${() => this._redoLastAction()} scale=l text=redo></calcite-action></calcite-action-group><calcite-button @click=${async () => await this._handleLayoutSave()} round>Save</calcite-button></div></calcite-navigation>`), t;
   }
   renderNodeControls() {
     let t;
-    return this.isEditMode && this._currentElement && this._currentNode && (t = l`<arcgis-layout-node-controls .isEditMode=${this.isEditMode} .messages=${this._messages} .node=${this._currentNode} @mouseout=${this._handleNodeControlsMouseOut} .referenceElement=${this._currentElement} style="position: absolute;" ${x(this._nodeControlsEl)}></arcgis-layout-node-controls>`), t;
+    return this.isEditMode && this._currentElement && this._currentNode && (t = u`<arcgis-layout-node-controls .isEditMode=${this.isEditMode} .messages=${this._messages} .node=${this._currentNode} @mouseout=${this._handleNodeControlsMouseOut} .referenceElement=${this._currentElement} style="position: absolute;" ${x(this._nodeControlsEl)}></arcgis-layout-node-controls>`), t;
   }
   renderEditor() {
     if (this.isEditMode) {
       const t = this._layoutNodeEditorConfig;
       if (t?.layoutNodeConfig?.editor)
-        return l`<calcite-shell-panel position=end slot=panel-end><arcgis-layout-node-editor .nodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode}></arcgis-layout-node-editor></calcite-shell-panel>`;
+        return u`<calcite-shell-panel position=end slot=panel-end><calcite-panel><arcgis-layout-node-editor .layoutNodeConfig=${t.layoutNodeConfig} .node=${t.layoutNode}></arcgis-layout-node-editor></calcite-panel></calcite-shell-panel>`;
     }
     return null;
   }
   render() {
-    return l`<calcite-shell>${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 u`<calcite-shell>${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>`;
   }
 }
-v("arcgis-layout-container", D);
+C("arcgis-layout-container", K);
 export {
-  D as ArcgisLayoutContainer
+  K as ArcgisLayoutContainer
 };

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

@@ -5,6 +5,7 @@ import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-button";
 import "../arcgis-layout-node-controls/index.js";
 import "@esri/calcite-components/components/calcite-shell-panel";
+import "@esri/calcite-components/components/calcite-panel";
 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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { IConfigurableNode, LayoutNode } from '../layouts/types';
+import { HTMLConfigurableLayoutNodeElement, LayoutNode } from '../layouts/types';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
 
 /** @private */
@@ -15,7 +15,7 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
     /** The node being configured */
     node?: LayoutNode;
     /** Reference element for popover positioning */
-    referenceElement?: HTMLElement & IConfigurableNode;
+    referenceElement?: HTMLConfigurableLayoutNodeElement;
     /** The t9n strings used in the layout node controls */
     messages: ArcgisLayoutContainer["_messages"];
     /** Event emitted when editor is opened */

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

@@ -1,12 +1,12 @@
-import { c as a } from "../../chunks/runtime.js";
+import { c as n } from "../../chunks/runtime.js";
 import { html as i } from "lit-html";
 import { LitElement as s, createEvent as r } from "@arcgis/lumina";
 import { css as l } from "@lit/reactive-element/css-tag.js";
 import { cloneObject as c, getWithDefault as t, getProp as o } from "@esri/hub-common";
 import { g as d, i as u } from "../../chunks/interpolate-translations.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 const p = l`:host{position:absolute}`;
 class f extends s {
   constructor() {
@@ -31,14 +31,14 @@ class f extends s {
     const e = this._layoutNodeConfig;
     if (!e || !this.referenceElement)
       return null;
-    const n = this.messages.layoutNodeControls?.a11yLabel || "";
-    return i`<calcite-popover auto-close offset-distance=0 .label=${n} 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=${t(e, "i18n.label", o(this.messages, "layoutNodeControls.configurableNodes.default.label"))} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${!this.referenceElement.canMove} icon=arrow-up .text=${t(e, "i18n.repositionUpLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.up"))}></calcite-action><calcite-action .disabled=${!this.referenceElement.canMove} icon=arrow-down .text=${t(e, "i18n.repositionDownLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.down"))}></calcite-action>${e.editor && i`<arcgis-ref-tooltip .text=${this.node?.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node?.readOnly || !this.referenceElement.canEdit} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${t(e, "i18n.edit", o(this.messages, "layoutNodeControls.configurableNodes.default.edit"))}></calcite-action></arcgis-ref-tooltip>` || ""}<calcite-action icon=trash .text=${t(e, "i18n.delete", o(this.messages, "layoutNodeControls.configurableNodes.default.delete"))}></calcite-action></calcite-action-group></calcite-action-bar></calcite-popover>`;
+    const a = this.messages.layoutNodeControls?.a11yLabel || "";
+    return i`<calcite-popover auto-close offset-distance=0 .label=${a} 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=${t(e, "i18n.label", o(this.messages, "layoutNodeControls.configurableNodes.default.label"))} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${!e.canMove} icon=arrow-up .text=${t(e, "i18n.repositionUpLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.up"))}></calcite-action><calcite-action .disabled=${!e.canMove} icon=arrow-down .text=${t(e, "i18n.repositionDownLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.down"))}></calcite-action>${e.editor && i`<arcgis-ref-tooltip .text=${this.node?.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node?.readOnly || !e.canEdit} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${t(e, "i18n.edit", o(this.messages, "layoutNodeControls.configurableNodes.default.edit"))}></calcite-action></arcgis-ref-tooltip>` || ""}<calcite-action icon=trash .text=${t(e, "i18n.delete", o(this.messages, "layoutNodeControls.configurableNodes.default.delete"))}></calcite-action></calcite-action-group></calcite-action-bar></calcite-popover>`;
   }
   render() {
     return this.isEditMode && this.node && this.referenceElement && this.renderControls() || "";
   }
 }
-a("arcgis-layout-node-controls", f);
+n("arcgis-layout-node-controls", f);
 export {
   f as ArcgisLayoutNodeControls
 };

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

@@ -1,11 +1,11 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { IChangeEventDetail } from '@esri/hub-common';
-import { ILayoutNodeConfig, LayoutNode } from '../layouts/types';
+import { IConfigurationValues } from '@esri/hub-common';
+import { ILayoutNodeChangeEventDetail, ILayoutNodeConfig, LayoutNode } from '../layouts/types';
 import { PropertyValues } from 'lit';
 
 interface IEditorValues {
-    value: unknown;
+    value: IConfigurationValues;
 }
 /** @private */
 export declare class ArcgisLayoutNodeEditor extends LitElement {
@@ -17,11 +17,8 @@ export declare class ArcgisLayoutNodeEditor extends LitElement {
      * editor as well as map values back to the node's
      * properties when changes are made in the editor.
      */
-    nodeConfig?: ILayoutNodeConfig;
+    layoutNodeConfig?: ILayoutNodeConfig;
     /** Emitted when the node's editor values change. */
-    readonly arcgisLayoutNodeChange: TargetedEvent<this, IChangeEventDetail & {
-        id: string;
-        nodeConfig: ILayoutNodeConfig;
-    }>;
+    readonly arcgisLayoutNodeChange: TargetedEvent<this, ILayoutNodeChangeEventDetail>;
 }
 export {};

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

@@ -1,58 +1,59 @@
-import { c as r } from "../../chunks/runtime.js";
-import { LitElement as u, createEvent as l, noShadowRoot as c } from "@arcgis/lumina";
-import { getProp as s, cloneObject as d, mergeObjects as h } from "@esri/hub-common";
+import { c as n } from "../../chunks/runtime.js";
+import { LitElement as u, createEvent as l, noShadowRoot as h } from "@arcgis/lumina";
+import { getProp as s, cloneObject as d, mergeObjects as c } from "@esri/hub-common";
 import { html as g } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
-class p extends u {
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
+class m extends u {
   constructor() {
     super(...arguments), this._values = { value: {} }, this.arcgisLayoutNodeChange = l();
   }
   static {
-    this.properties = { _values: 16, node: 0, nodeConfig: 0 };
+    this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.shadowRootOptions = c;
+    this.shadowRootOptions = h;
   }
   get _schemas() {
-    const e = {
+    const t = this.layoutNodeConfig?.editor?.schema || {
       type: "object",
       properties: {
         value: {}
       }
-    }, t = {
+    }, o = this.layoutNodeConfig?.editor?.uiSchema || {
       type: "Layout",
       elements: [
         {
           scope: "/properties/value",
           type: "Control",
           options: {
-            control: this.nodeConfig?.editor?.tag
+            control: this.layoutNodeConfig?.editor?.tag
           }
         }
       ]
     };
-    return { schema: e, uiSchema: t };
+    return { schema: t, uiSchema: o };
   }
-  willUpdate(e) {
-    (e.has("nodeConfig") || e.has("node")) && this.init();
+  get _hasEditorTag() {
+    return !!this.layoutNodeConfig?.editor?.tag;
+  }
+  willUpdate(t) {
+    (t.has("layoutNodeConfig") || t.has("node")) && this.init();
   }
   init() {
-    if (!this.nodeConfig)
+    if (!this.layoutNodeConfig)
       return;
-    const e = s(this.nodeConfig, "valuesProp"), t = s(this.nodeConfig, "editor.valuesCallback") || ((o) => o);
-    this._values = {
-      value: t(e ? this.node.properties?.[e] : this.node.properties)
-    };
+    const t = s(this.layoutNodeConfig, "valuesProp"), e = (s(this.layoutNodeConfig, "editor.valuesInCallback") || ((i) => i))(t ? this.node.properties?.[t] : this.node.properties);
+    this._values = this._hasEditorTag ? { value: e } : e;
   }
-  _handleConfigurationEditorChange(e) {
-    e.stopPropagation();
-    const { values: t = {}, valid: o } = e.detail, a = d(this._values.value), n = t.value, i = h(n, a);
-    this._values = { value: i }, this.arcgisLayoutNodeChange.emit({
-      nodeConfig: this.nodeConfig,
-      values: i,
-      valid: o,
+  _handleConfigurationEditorChange(t) {
+    t.stopPropagation();
+    const { values: o = {}, valid: e } = t.detail, i = d(this._hasEditorTag ? this._values.value : this._values), r = this._hasEditorTag ? o.value : o, a = c(r, i);
+    this._values = this._hasEditorTag ? { value: a } : a, this.arcgisLayoutNodeChange.emit({
+      layoutNodeConfig: this.layoutNodeConfig,
+      values: a,
+      valid: e,
       id: this.node.id
     });
   }
@@ -60,7 +61,7 @@ class p extends u {
     return g`<div data-element=layout-card-editor><arcgis-configuration-editor @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} .schema=${this._schemas.schema} .uiSchema=${this._schemas.uiSchema} .values=${this._values}></arcgis-configuration-editor></div>`;
   }
 }
-r("arcgis-layout-node-editor", p);
+n("arcgis-layout-node-editor", m);
 export {
-  p as ArcgisLayoutNodeEditor
+  m as ArcgisLayoutNodeEditor
 };

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

@@ -7,8 +7,8 @@ import { Logger as a } from "@esri/hub-common";
 import { spreadProps as g } from "@open-wc/lit-helpers";
 import { a as f } from "../../chunks/typeGuards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 class y 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 m } from "../../chunks/getResponsiveClasses.js";
 import { Logger as n } 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.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 class f extends l {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;

package/dist/components/arcgis-nav-card/customElement.js

@@ -4,8 +4,8 @@ import { LitElement as h, noShadowRoot as b } from "@arcgis/lumina";
 import { u as m } from "../../chunks/useT9n.js";
 import { getProp as l } from "@esri/hub-common";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 function u(i, s, t, e) {
   {
     let a = i;

package/dist/components/arcgis-text-card/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { IConfigurableNode, ILayoutNodeConfig } from '../layouts/types';
+import { IConfigurableLayoutNode, ILayoutNodeConfig } from '../layouts/types';
 
 /**
  * A text card that can be added to an ILayout or leveraged
@@ -9,26 +9,12 @@ import { IConfigurableNode, ILayoutNodeConfig } from '../layouts/types';
  */
 export declare class ArcgisTextCard extends LitElement {
     /**
-     * Whether the text card can be moved or not.
-     * This readonly property is consumed by the
-     * arcgis-layout-node-controls to determine
-     * which layout controls to enable/disable.
-     * TODO: make permissions-based?
-     *
-     * @default false
-     */
-    get canMove(): boolean;
-    /**
-     * Whether the text card can be edited or not.
-     * This readonly property is consumed by the
-     * arcgis-layout-node-controls to determine
-     * which layout controls to enable/disable.
-     * TODO: make permissions-based?
-     *
-     * @default false
+     * The text card is a configurable node in the
+     * layout system. The following read-only property
+     * provides configuration information to the
+     * layout editor.
      */
-    get canEdit(): boolean;
-    get nodeConfig(): ILayoutNodeConfig;
+    get layoutNodeConfig(): ILayoutNodeConfig;
     /**
      * The HTML content to display - this will be
      * sanitized before rendering.

package/dist/components/arcgis-text-card/customElement.js

@@ -4,17 +4,17 @@ import { LitElement as s } from "@arcgis/lumina";
 import { css as o } from "@lit/reactive-element/css-tag.js";
 import { sanitizeHtml as r } from "@esri/hub-components";
 import { getProp as t } from "@esri/hub-common";
-import { u as n } from "../../chunks/useT9n.js";
+import { u as a } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.2/esri/copyright.txt for details.
-v0.2.1 */
+See https://js.arcgis.com/0.3/esri/copyright.txt for details.
+v0.3.0 */
 const d = o`:host>div>h1:first-child,:host>div>h2:first-child,:host>div>h3:first-child,:host>div>h4:first-child,:host>div>h5:first-child,:host>div>h6:first-child,:host>div>p:first-child{margin-top:0}`;
 class h extends s {
   constructor() {
-    super(...arguments), this._messages = n(), this.html = "";
+    super(...arguments), this._messages = a(), this.html = "";
   }
   static {
-    this.properties = { canMove: 32, canEdit: 32, nodeConfig: 32, html: 1 };
+    this.properties = { layoutNodeConfig: 32, html: 1 };
   }
   static {
     this.styles = d;
@@ -22,22 +22,20 @@ class h extends s {
   get _content() {
     return r(this.html);
   }
-  get canMove() {
-    return !0;
-  }
-  get canEdit() {
-    return !0;
-  }
-  get nodeConfig() {
+  get layoutNodeConfig() {
     return {
       tag: "arcgis-text-card",
+      // TODO: make permissions-based?
+      canEdit: !0,
+      // TODO: make permissions-based?
+      canMove: !0,
       i18n: {
-        label: t(this._messages, "nodeConfig.label"),
-        description: t(this._messages, "nodeConfig.description"),
-        editLabel: t(this._messages, "nodeConfig.edit"),
-        deleteLabel: t(this._messages, "nodeConfig.delete"),
-        repositionUpLabel: t(this._messages, "nodeConfig.up"),
-        repositionDownLabel: t(this._messages, "nodeConfig.down")
+        label: t(this._messages, "layoutNodeConfig.label"),
+        description: t(this._messages, "layoutNodeConfig.description"),
+        editLabel: t(this._messages, "layoutNodeConfig.edit"),
+        deleteLabel: t(this._messages, "layoutNodeConfig.delete"),
+        repositionUpLabel: t(this._messages, "layoutNodeConfig.up"),
+        repositionDownLabel: t(this._messages, "layoutNodeConfig.down")
       },
       valuesProp: "html",
       defaults: {},