@esri/hub-web-components 0.1.0 → 0.2.1

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

@@ -1,5 +1,20 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ILayout, ILayoutNode, IProcessLayoutOptions } 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;
+    /** @default false */
+    debug: boolean;
+    /**
+     * Whether the layout is in edit mode
+     *
+     * @default false
+     */
+    isEditMode: boolean;
+    /** Options for processing the layout */
+    options: IProcessLayoutOptions;
 }

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

@@ -1,20 +1,168 @@
-import { c as t } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-import { LitElement as s } from "@arcgis/lumina";
-import { css as o } from "@lit/reactive-element/css-tag.js";
+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 { 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.1/esri/copyright.txt for details.
-v0.1.0 */
-const e = o``;
-class i extends s {
+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 = [
+  "arcgis-layout-section",
+  "arcgis-layout-row",
+  "arcgis-layout-column",
+  "calcite-button",
+  "calcite-chip",
+  "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",
+  "arcgis-hub-timeline",
+  "arcgis-hub-entity-metadata",
+  "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}`);
+    });
+  }), 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 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"
+          );
+          t.push(...h(N, b, o, L, !1));
+        });
+      });
+    });
+  }), t) : (t.push("Layout must be defined."), t);
+}
+class D extends C {
+  constructor() {
+    super(), this._messages = U(), this._nodeControlsEl = f(), 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);
+  }
   static {
-    this.styles = e;
+    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;
+  }
+  static {
+    this.styles = j;
+  }
+  get _context() {
+    return w();
+  }
+  get _canUndo() {
+    return this._historyIdx > 0;
+  }
+  get _canRedo() {
+    return this._historyIdx < this._historyStack.length - 1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._initShell();
+  }
+  willUpdate(t) {
+    (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;
+  }
+  async _handleLayoutNodeEditorChange(t) {
+    const { nodeConfig: o, id: s, values: r } = t.detail, e = d(this._layout), n = p(e, 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;
+    }
+  }
+  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);
+  }
+  _handleNodeMouseEnter(t) {
+    t.stopPropagation(), c.debug("MOUSE OVER EVENT >>>", t);
+    const o = t.detail, s = o.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}`);
+    }
+  }
+  _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);
+  }
+  _handleNodeControlsMouseOut() {
+    this._currentElement?.matches(":hover") || (this._currentNode = void 0, this._currentElement = void 0);
+  }
+  _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)
+    };
+  }
+  _undoLastAction() {
+    this._canUndo && (this._historyIdx--, this._processedLayout = this._historyStack[this._historyIdx]);
+  }
+  _redoLastAction() {
+    this._canRedo && (this._historyIdx++, this._processedLayout = this._historyStack[this._historyIdx]);
+  }
+  async _handleLayoutSave() {
+    c.log("HANDLE LAYOUT SAVE >>>", this.layout);
+  }
+  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;
+  }
+  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;
+  }
+  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 null;
   }
   render() {
-    return r`<div>PLACEHOLDER FOR LAYOUT CONTAINER</div>`;
+    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>`;
   }
 }
-t("arcgis-layout-container", i);
+v("arcgis-layout-container", D);
 export {
-  i as ArcgisLayoutContainer
+  D as ArcgisLayoutContainer
 };

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

@@ -1 +1,11 @@
+import "@esri/calcite-components/components/calcite-navigation";
+import "@esri/calcite-components/components/calcite-navigation-logo";
+import "@esri/calcite-components/components/calcite-action-group";
+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 "../arcgis-layout-node-editor/index.js";
+import "@esri/calcite-components/components/calcite-shell";
+import "../arcgis-layout/index.js";
 export * from "./customElement.js";

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

@@ -1 +1,11 @@
+import "@esri/calcite-components/components/calcite-navigation";
+import "@esri/calcite-components/components/calcite-navigation-logo";
+import "@esri/calcite-components/components/calcite-action-group";
+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 "../arcgis-layout-node-editor/index.js";
+import "@esri/calcite-components/components/calcite-shell";
+import "../arcgis-layout/index.js";
 export * from "./customElement.js";

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

@@ -0,0 +1,23 @@
+/// <reference types="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { IConfigurableNode, LayoutNode } from '../layouts/types';
+import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
+
+/** @private */
+export declare class ArcgisLayoutNodeControls extends LitElement {
+    /**
+     * Indicates whether the card's configuration
+     * controls should be shown.
+     *
+     * @default false
+     */
+    isEditMode: boolean;
+    /** The node being configured */
+    node?: LayoutNode;
+    /** Reference element for popover positioning */
+    referenceElement?: HTMLElement & IConfigurableNode;
+    /** The t9n strings used in the layout node controls */
+    messages: ArcgisLayoutContainer["_messages"];
+    /** Event emitted when editor is opened */
+    readonly arcgisLayoutNodeEditorOpen: TargetedEvent<this, void>;
+}

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

@@ -0,0 +1,44 @@
+import { c as a } 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 */
+const p = l`:host{position:absolute}`;
+class f extends s {
+  constructor() {
+    super(...arguments), this.isEditMode = !1, this.arcgisLayoutNodeEditorOpen = r();
+  }
+  static {
+    this.properties = { isEditMode: 5, node: 0, referenceElement: 0, messages: 0 };
+  }
+  static {
+    this.styles = p;
+  }
+  get _layoutNodeConfig() {
+    if (!this.referenceElement || !this.node)
+      return;
+    let e = d(this.referenceElement, this.node);
+    return e && (e = u(this.messages, e)), c(e);
+  }
+  _onOpenEditorButtonClick() {
+    this.arcgisLayoutNodeEditorOpen.emit();
+  }
+  renderControls() {
+    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>`;
+  }
+  render() {
+    return this.isEditMode && this.node && this.referenceElement && this.renderControls() || "";
+  }
+}
+a("arcgis-layout-node-controls", f);
+export {
+  f as ArcgisLayoutNodeControls
+};

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

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/hub-components/dist/components/arcgis-ref-tooltip.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,27 @@
+/// <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 { PropertyValues } from 'lit';
+
+interface IEditorValues {
+    value: unknown;
+}
+/** @private */
+export declare class ArcgisLayoutNodeEditor extends LitElement {
+    /** The layout node to edit */
+    node: LayoutNode;
+    /**
+     * The configuration for the layout node being edited.
+     * This is used to build the schema for the configuration
+     * editor as well as map values back to the node's
+     * properties when changes are made in the editor.
+     */
+    nodeConfig?: ILayoutNodeConfig;
+    /** Emitted when the node's editor values change. */
+    readonly arcgisLayoutNodeChange: TargetedEvent<this, IChangeEventDetail & {
+        id: string;
+        nodeConfig: ILayoutNodeConfig;
+    }>;
+}
+export {};

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

@@ -0,0 +1,66 @@
+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 { 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 {
+  constructor() {
+    super(...arguments), this._values = { value: {} }, this.arcgisLayoutNodeChange = l();
+  }
+  static {
+    this.properties = { _values: 16, node: 0, nodeConfig: 0 };
+  }
+  static {
+    this.shadowRootOptions = c;
+  }
+  get _schemas() {
+    const e = {
+      type: "object",
+      properties: {
+        value: {}
+      }
+    }, t = {
+      type: "Layout",
+      elements: [
+        {
+          scope: "/properties/value",
+          type: "Control",
+          options: {
+            control: this.nodeConfig?.editor?.tag
+          }
+        }
+      ]
+    };
+    return { schema: e, uiSchema: t };
+  }
+  willUpdate(e) {
+    (e.has("nodeConfig") || e.has("node")) && this.init();
+  }
+  init() {
+    if (!this.nodeConfig)
+      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)
+    };
+  }
+  _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,
+      id: this.node.id
+    });
+  }
+  render() {
+    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);
+export {
+  p as ArcgisLayoutNodeEditor
+};

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

@@ -0,0 +1,2 @@
+import "@esri/hub-components/dist/components/arcgis-configuration-editor.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,2 @@
+import "@esri/hub-components/dist/components/arcgis-configuration-editor.js";
+export * from "./customElement.js";

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

@@ -6,20 +6,29 @@ import { ILayoutNode, IRow, LayoutUtils } from '../layouts/types';
 export declare class ArcgisLayoutRow extends LitElement {
     /** The row node to render */
     node: IRow;
-    /** The currently selected node */
+    /**
+     * The currently focused/hovered node. This is
+     * tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
+     */
     currentNode?: ILayoutNode;
-    /** Layout utility functions */
+    /**
+     * Utility functions passed down to all child layout
+     * components. For now, this is specifically needed to
+     * process a remote layout that is referenced by a
+     * layout node.
+     */
     utils?: LayoutUtils;
     /**
-     * Whether the layout is in edit mode
+     * Enables debug mode
      *
      * @default false
      */
-    isEditMode: boolean;
+    debug: boolean;
     /**
-     * Enable debug mode
+     * Whether the layout is in edit mode
      *
      * @default false
      */
-    debug: boolean;
+    isEditMode: boolean;
 }

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

@@ -1,44 +1,45 @@
-import { c as m } from "../../chunks/runtime.js";
+import { c as l } from "../../chunks/runtime.js";
 import { html as t } from "lit-html";
 import { keyed as e } from "lit-html/directives/keyed.js";
-import { LitElement as d, noShadowRoot as c, safeClassMap as i, safeStyleMap as p } from "@arcgis/lumina";
-import { a as g, b as y } from "../../chunks/getResponsiveClasses.js";
+import { LitElement as m, noShadowRoot as d, safeClassMap as i, safeStyleMap as c } from "@arcgis/lumina";
+import { a as p } from "../../chunks/getResponsiveClasses.js";
 import { Logger as a } from "@esri/hub-common";
-import { spreadProps as $ } from "@open-wc/lit-helpers";
+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.1/esri/copyright.txt for details.
-v0.1.0 */
-class f extends d {
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.1 */
+class y extends m {
   constructor() {
-    super(...arguments), this.isEditMode = !1, this.debug = !1;
+    super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, currentNode: 0, utils: 0, isEditMode: 5, debug: 5 };
+    this.properties = { node: 0, currentNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = c;
+    this.shadowRootOptions = d;
   }
-  getChildClasses(r) {
-    const s = g(r.columnProps);
+  _getChildClasses(r) {
+    const s = p(r.columnProps);
     return r.classes?.length && s.push(...r.classes), r.id === this.currentNode?.id && s.push("current-node"), s;
   }
   render() {
-    const { debug: r, isEditMode: s, utils: n } = this;
-    return (this.node.children ?? []).map((o) => {
-      const { id: u } = o;
-      if (!y(o)) {
-        a.warn(`Child with id ${u} in arcgis-layout-row is not a column.`);
+    const { debug: r, utils: s } = this;
+    return this.node.children?.map((o) => {
+      const { id: n } = o;
+      if (!f(o)) {
+        a.warn(`Child with id ${n} in arcgis-layout-row is not a column.`);
         return;
       }
       try {
-        return e(o.id, t`<arcgis-layout-column class=${i(this.getChildClasses(o).join(" "))} .currentNode=${this.currentNode} .debug=${r} .isEditMode=${s} .node=${o} .utils=${n} style=${p(o.styles)} .role=${o.columnProps?.role} .ariaLabel=${o.columnProps?.ariaLabel} ${$(o.properties ?? {})}></arcgis-layout-column>`);
-      } catch (l) {
-        return a.error(`Error rendering column with id ${o.id} in arcgis-hub-layout-row:`, l), e(o.id, t`<arcgis-layout-column class=${i({ "layout-error": r })} .debug=${r} .node=${{ id: o.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`);
+        return e(o.id, t`<arcgis-layout-column class=${i(this._getChildClasses(o).join(" "))} .currentNode=${this.currentNode} .debug=${r} .isEditMode=${this.isEditMode} .node=${o} .utils=${s} style=${c(o.styles)} .role=${o.columnProps?.role} .ariaLabel=${o.columnProps?.ariaLabel} ${g(o.properties ?? {})}></arcgis-layout-column>`);
+      } catch (u) {
+        return a.error(`Error rendering column with id ${o.id} in arcgis-hub-layout-row:`, u), r ? e(o.id, t`<arcgis-layout-column class=${i({ "layout-error": r })} .debug=${r} .node=${{ id: o.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`) : null;
       }
-    });
+    }) ?? [];
   }
 }
-m("arcgis-layout-row", f);
+l("arcgis-layout-row", y);
 export {
-  f as ArcgisLayoutRow
+  y as ArcgisLayoutRow
 };

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

@@ -6,20 +6,29 @@ import { ILayoutNode, ISection, LayoutUtils } from '../layouts/types';
 export declare class ArcgisLayoutSection extends LitElement {
     /** The section node to render */
     node: ISection;
-    /** The currently selected node */
+    /**
+     * The currently focused/hovered node. This is
+     * tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
+     */
     currentNode?: ILayoutNode;
-    /** Layout utility functions */
+    /**
+     * Utility functions passed down to all child layout
+     * components. For now, this is specifically needed to
+     * process a remote layout that is referenced by a
+     * layout node.
+     */
     utils?: LayoutUtils;
     /**
-     * Whether the layout is in edit mode
+     * Enables debug mode
      *
      * @default false
      */
-    isEditMode: boolean;
+    debug: boolean;
     /**
-     * Enable debug mode
+     * Whether the layout is in edit mode
      *
      * @default false
      */
-    debug: boolean;
+    isEditMode: boolean;
 }

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

@@ -1,44 +1,45 @@
-import { c as l } from "../../chunks/runtime.js";
+import { c as d } from "../../chunks/runtime.js";
 import { html as e } from "lit-html";
 import { keyed as i } from "lit-html/directives/keyed.js";
-import { LitElement as g, noShadowRoot as p, safeClassMap as a, safeStyleMap as c } from "@arcgis/lumina";
-import { g as m, i as w } from "../../chunks/getResponsiveClasses.js";
+import { LitElement as l, noShadowRoot as p, safeClassMap as a, safeStyleMap as g } from "@arcgis/lumina";
+import { i as c } from "../../chunks/typeGuards.js";
+import { g as m } from "../../chunks/getResponsiveClasses.js";
 import { Logger as n } from "@esri/hub-common";
-import { spreadProps as y } from "@open-wc/lit-helpers";
+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.1/esri/copyright.txt for details.
-v0.1.0 */
-class $ extends g {
+See https://js.arcgis.com/0.2/esri/copyright.txt for details.
+v0.2.1 */
+class f extends l {
   constructor() {
-    super(...arguments), this.isEditMode = !1, this.debug = !1;
+    super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, currentNode: 0, utils: 0, isEditMode: 5, debug: 5 };
+    this.properties = { node: 0, currentNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
     this.shadowRootOptions = p;
   }
-  getChildClasses(s) {
+  _getChildClasses(s) {
     const o = m(s.rowProps);
     return s.classes?.length && o.push(...s.classes), s.id === this.currentNode?.id && o.push("current-node"), o;
   }
   render() {
-    const { debug: s, isEditMode: o, utils: u } = this;
+    const { debug: s, utils: o } = this;
     return (this.node.children ?? []).map((r) => {
       const { id: t } = r;
-      if (!w(r)) {
+      if (!c(r)) {
         n.warn(`Child with id ${t} in arcgis-layout-section is not a row.`);
         return;
       }
       try {
-        return i(r.id, e`<arcgis-layout-row class=${a(this.getChildClasses(r).join(" "))} .currentNode=${this.currentNode} .debug=${s} .isEditMode=${o} .node=${r} .utils=${u} style=${c(r.styles)} .role=${r.rowProps?.role} .ariaLabel=${r.rowProps?.ariaLabel} ${y(r.properties ?? {})}></arcgis-layout-row>`);
-      } catch (d) {
-        return n.error(`Error rendering row with id ${t} in arcgis-hub-layout-row:`, d), i(r.id, e`<arcgis-layout-row class=${a({ "layout-error": s })} .debug=${s} .node=${{ id: r.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
+        return i(r.id, e`<arcgis-layout-row class=${a(this._getChildClasses(r).join(" "))} .currentNode=${this.currentNode} .debug=${s} .isEditMode=${this.isEditMode} .node=${r} .utils=${o} style=${g(r.styles)} .role=${r.rowProps?.role} .ariaLabel=${r.rowProps?.ariaLabel} ${w(r.properties ?? {})}></arcgis-layout-row>`);
+      } catch (u) {
+        return n.error(`Error rendering row with id ${t} in arcgis-hub-layout-row:`, u), i(r.id, e`<arcgis-layout-row class=${a({ "layout-error": s })} .debug=${s} .node=${{ id: r.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
       }
     });
   }
 }
-l("arcgis-layout-section", $);
+d("arcgis-layout-section", f);
 export {
-  $ as ArcgisLayoutSection
+  f as ArcgisLayoutSection
 };