@esri/hub-web-components 0.9.0 → 0.10.0

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 { HTMLConfigurableLayoutNodeElement, LayoutNode } from '@esri/hub-common';
+import { HTMLConfigurableLayoutNodeElement, ILayoutNodeChangeEventDetail, LayoutNode } from '@esri/hub-common';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
 import { ArcgisLayoutNodeEditor } from '../arcgis-layout-node-editor/customElement.js';
 
@@ -20,6 +20,18 @@ export declare class ArcgisLayoutNodeControls extends LitElement {
     /** The t9n strings used in the layout node controls */
     messages: ArcgisLayoutContainer["_messages"];
     layoutNodeEditorRef?: ArcgisLayoutNodeEditor;
+    /** Event emitted for telemetry */
+    readonly hubTelemetry: TargetedEvent<this, Record<string, unknown>>;
     /** Event emitted when editor is opened */
     readonly arcgisLayoutNodeEditorOpen: TargetedEvent<this, void>;
+    /**
+     * Emitted when the node changes (e.g. the node's
+     * visibility settings).
+     *
+     * Note: leveraging the ILayoutNodeChangeEventDetail
+     * interface sets us up for a future where node
+     * visibility will be managed via a more advanced
+     * editor (as opposed to simple toggle).
+     */
+    readonly arcgisLayoutNodeVisibilityChange: TargetedEvent<this, ILayoutNodeChangeEventDetail>;
 }

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

@@ -1,46 +1,54 @@
-import { c as n } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { LitElement as r, createEvent as l } from "@arcgis/lumina";
+import { c as l } from "../../chunks/runtime.js";
+import { html as n } from "lit-html";
+import { LitElement as r, createEvent as t } from "@arcgis/lumina";
 import { css as c } from "@lit/reactive-element/css-tag.js";
-import { cloneObject as d, getWithDefault as t, getProp as o } from "@esri/hub-common";
-import { g as u, i as p } from "../../chunks/interpolate-translations.js";
+import { cloneObject as d, getWithDefault as i, getProp as o, isNil as u } from "@esri/hub-common";
+import { g as h, i as f } from "../../chunks/interpolate-translations.js";
+import { i as g } from "../../chunks/isNodeVisible.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
-const f = c`:host{position:absolute}`;
-class g extends r {
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
+const p = c`:host{position:absolute}`;
+class m extends r {
   constructor() {
-    super(...arguments), this.isEditMode = !1, this.arcgisLayoutNodeEditorOpen = l();
+    super(...arguments), this.isEditMode = !1, this.hubTelemetry = t(), this.arcgisLayoutNodeEditorOpen = t(), this.arcgisLayoutNodeVisibilityChange = t();
   }
   static {
     this.properties = { isEditMode: 5, node: 0, referenceElement: 0, messages: 0, layoutNodeEditorRef: 0 };
   }
   static {
-    this.styles = f;
+    this.styles = p;
   }
   get _layoutNodeConfig() {
     if (!this.referenceElement || !this.node)
       return;
-    let e = u(this.referenceElement, this.node);
-    return e && (e = p(this.messages, e)), d(e);
+    let e = h(this.referenceElement, this.node);
+    return e && (e = f(this.messages, e)), d(e);
   }
-  _onOpenEditorButtonClick() {
-    this.arcgisLayoutNodeEditorOpen.emit();
+  get _isNodeVisible() {
+    return g(this.node);
+  }
+  _onToggleVisibilityClick() {
+    this.arcgisLayoutNodeVisibilityChange.emit({
+      id: this.node.id,
+      valid: !0,
+      layoutNodeConfig: this._layoutNodeConfig
+    }), this.hubTelemetry.emit({});
   }
   renderControls() {
     const e = this._layoutNodeConfig;
     if (!e || !this.referenceElement)
       return null;
-    const a = this.messages.layoutNodeControls?.a11yLabel || "", s = this.layoutNodeEditorRef ? {
+    const s = this.messages.layoutNodeControls?.a11yLabel || "", a = this.layoutNodeEditorRef ? {
       extraContainers: [this.layoutNodeEditorRef]
     } : void 0;
-    return i`<calcite-popover auto-close .focusTrapOptions=${s} 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>`;
+    return n`<calcite-popover auto-close .focusTrapOptions=${a} offset-distance=0 .label=${s} open overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${this.referenceElement}><calcite-action-bar expand-disabled layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${i(e, "i18n.label", o(this.messages, "layoutNodeControls.configurableNodes.default.label"))} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${u(e.canAdjustVisibility) ? !1 : !e.canAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? i(e, "i18n.hideLabel", o(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : i(e, "i18n.showLabel", o(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action></calcite-action-group></calcite-action-bar></calcite-popover>`;
   }
   render() {
     return this.isEditMode && this.node && this.referenceElement && this.renderControls() || "";
   }
 }
-n("arcgis-layout-node-controls", g);
+l("arcgis-layout-node-controls", m);
 export {
-  g as ArcgisLayoutNodeControls
+  m as ArcgisLayoutNodeControls
 };

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

@@ -2,5 +2,4 @@ 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

@@ -2,5 +2,4 @@ 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.js

@@ -5,8 +5,8 @@ import { createRef as g, ref as f } from "lit/directives/ref.js";
 import { html as m } from "lit";
 import { css as v } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
 const p = v`@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 y extends c {
   constructor() {

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

@@ -0,0 +1,25 @@
+/// <reference types="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+
+/**
+ * A component for rendering overlay content on
+ * layout nodes. Overlays are used to indicate
+ * special states of layout nodes (e.g., hidden).
+ */
+export declare class ArcgisLayoutNodeOverlay extends LitElement {
+    /**
+     * The type of overlay to display. For now, we'll
+     * support a predefined set of overlay types
+     * (rather than allowing content to be slotted
+     * in) to keep the UI consistent, and to
+     * simplify implementation.
+     *
+     * Add additional types as needed.
+     */
+    type: "hidden" | undefined;
+    /**
+     * The ID of the layout node this overlay
+     * is anchored to.
+     */
+    nodeId: string | undefined;
+}

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

@@ -0,0 +1,34 @@
+import { c as i } from "../../chunks/runtime.js";
+import { html as e } from "lit-html";
+import { LitElement as s } from "@arcgis/lumina";
+import { css as r } from "@lit/reactive-element/css-tag.js";
+import { u as n } from "../../chunks/useT9n.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
+const a = r`:host{display:flex;justify-content:center;align-items:center;position:fixed;position-area:center;width:anchor-size(width);height:anchor-size(height);anchor-name:--overlay;pointer-events:none;outline:1.5px dashed var(--calcite-color-border-1)}.overlay{opacity:.6;background-color:#ffffffa6;width:100%;height:100%}.overlay-content{position:fixed}`;
+class c extends s {
+  constructor() {
+    super(...arguments), this._messages = n();
+  }
+  static {
+    this.properties = { type: 1, nodeId: 1 };
+  }
+  static {
+    this.styles = a;
+  }
+  willUpdate(t) {
+    const o = this.el;
+    t.has("nodeId") && o.style.setProperty("position-anchor", `--overlay-anchor-${this.nodeId}`);
+  }
+  renderHiddenOverlayContent() {
+    return e`<calcite-chip appearance=solid icon=view-hide .label=${this._messages.hidden}>${this._messages.hidden}</calcite-chip>`;
+  }
+  render() {
+    return e`<div class="overlay"></div><div style=${`position-anchor: --overlay-anchor-${this.nodeId}`} class="overlay-content">${this.type === "hidden" && this.renderHiddenOverlayContent() || ""}</div>`;
+  }
+}
+i("arcgis-layout-node-overlay", c);
+export {
+  c as ArcgisLayoutNodeOverlay
+};

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

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-chip";
+export * from "./customElement.js";

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

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-chip";
+export * from "./customElement.js";

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 y } from "../../chunks/typeGuards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.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 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.9/esri/copyright.txt for details.
-v0.9.0 */
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
 class y extends l {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;

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

@@ -20,4 +20,10 @@ export declare class ArcgisNavCard extends LitElement {
      * default strings.
      */
     translations: ITranslationMap;
+    /**
+     * Whether the parent layout is in edit mode
+     *
+     * @default false
+     */
+    isEditMode: boolean;
 }

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

@@ -1,43 +1,44 @@
 import { c } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-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";
+import { html as o } from "lit-html";
+import { LitElement as h, noShadowRoot as m } from "@arcgis/lumina";
+import { u as b } from "../../chunks/useT9n.js";
+import { getProp as n } from "@esri/hub-common";
+import { i as d } from "../../chunks/isNodeVisible.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
 function u(i, s, t, e) {
   {
     let a = i;
-    const n = l(e, `${s}.${i}`);
-    if (n)
-      a = n;
+    const r = n(e, `${s}.${i}`);
+    if (r)
+      a = r;
     else {
-      const o = l(t, i);
-      o && (a = o);
+      const l = n(t, i);
+      l && (a = l);
     }
     return a;
   }
 }
 class g extends h {
   constructor() {
-    super(...arguments), this._messages = m(), this.sections = [], this.translations = {};
+    super(...arguments), this._messages = b(), this.sections = [], this.translations = {}, this.isEditMode = !1;
   }
   static {
-    this.properties = { sections: 0, translations: 0 };
+    this.properties = { sections: 0, translations: 0, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = b;
+    this.shadowRootOptions = m;
   }
   get _visibleSections() {
-    return this.sections.filter((s) => !s.hidden);
+    return this.sections.filter((s) => d(s));
   }
   get _hasSections() {
     return this._visibleSections.length > 0;
   }
   renderTabs() {
     let s;
-    return this._hasSections && (s = r`<calcite-tabs scale=l><calcite-tab-nav slot=title-group>${this._visibleSections.map((t, e) => r`<calcite-tab-title .selected=${e === 0} .tab=${t.label}>${u(t.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((t, e) => r`<calcite-tab .selected=${e === 0} .tab=${t.label}><arcgis-layout-section .node=${t}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), s;
+    return this._hasSections && (s = o`<calcite-tabs scale=l><calcite-tab-nav slot=title-group>${this._visibleSections.map((t, e) => o`<calcite-tab-title .selected=${e === 0} .tab=${t.label}>${u(t.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((t, e) => o`<calcite-tab .selected=${e === 0} .tab=${t.label}><arcgis-layout-section .isEditMode=${this.isEditMode} .node=${t}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), s;
   }
   render() {
     return this.renderTabs();

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

@@ -1,15 +1,15 @@
-import { c as e } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { LitElement as s } from "@arcgis/lumina";
+import { c as i } from "../../chunks/runtime.js";
+import { html as s } from "lit-html";
+import { LitElement as e } from "@arcgis/lumina";
 import { css as o } from "@lit/reactive-element/css-tag.js";
 import { sanitizeHtml as r } from "@esri/hub-components";
 import { getProp as t } from "@esri/hub-common";
 import { u as a } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.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 {
+class l extends e {
   constructor() {
     super(...arguments), this._messages = a(), this.html = "";
   }
@@ -29,6 +29,8 @@ class h extends s {
       canEdit: !0,
       // TODO: make permissions-based?
       canMove: !0,
+      // TODO: make permissions-based?
+      canAdjustVisibility: !0,
       i18n: {
         label: t(this._messages, "layoutNodeConfig.label"),
         description: t(this._messages, "layoutNodeConfig.description"),
@@ -45,10 +47,10 @@ class h extends s {
     };
   }
   render() {
-    return i`<div .innerHTML=${this._content ?? ""}></div>`;
+    return s`<div .innerHTML=${this._content ?? ""}></div>`;
   }
 }
-e("arcgis-text-card", h);
+i("arcgis-text-card", l);
 export {
-  h as ArcgisTextCard
+  l as ArcgisTextCard
 };

package/dist/components/layouts/components/layout-node/customElement.js

@@ -1,72 +1,93 @@
-import { html as r } from "lit-html";
-import { safeStyleMap as i, deferLoad as u } from "@arcgis/lumina";
-import { spread as c, spreadProps as $ } from "@open-wc/lit-helpers";
-import { getProp as v } from "@esri/hub-common";
+import { html as i } from "lit-html";
+import { safeStyleMap as $, deferLoad as b } from "@arcgis/lumina";
+import { spread as c, spreadProps as s } from "@open-wc/lit-helpers";
+import { getProp as n } from "@esri/hub-common";
+import { i as d } from "../../../../chunks/isNodeVisible.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.9/esri/copyright.txt for details.
-v0.9.0 */
-function x({ tagName: g, props: n, classes: o, styles: a, children: s, options: b }) {
-  const d = n.onKeyDown, y = n.onMouseLeave, m = n.onMouseEnter, h = v(n, "node.id"), t = {
-    ...n,
-    tabIndex: b.isEditMode ? 0 : void 0
-  }, e = {
-    class: o,
-    "data-node-id": h,
-    label: n.label,
+See https://js.arcgis.com/0.10/esri/copyright.txt for details.
+v0.10.0 */
+function E({ tagName: y, props: g, classes: m, styles: a, children: o, options: h }) {
+  const l = g.onKeyDown, v = g.onMouseLeave, k = g.onMouseEnter, u = n(g, "node.id"), r = {
+    ...g,
+    tabIndex: h.isEditMode ? 0 : void 0
+  }, t = {
+    class: m,
+    "data-node-id": u,
+    label: g.label,
     // label must be an attribute
-    "@keydown": d,
-    "@mouseleave": y,
-    "@mouseenter": m
+    "@keydown": l,
+    "@mouseleave": v,
+    "@mouseenter": k
   };
-  switch (g) {
+  d(n(g, "node")) || (a || (a = {}), a["anchor-name"] = `--overlay-anchor-${u}`);
+  let e;
+  switch (y) {
     case "arcgis-layout-row":
-      return r`<arcgis-layout-row style=${i(a)} ${c(e)} ${$(t)}>${s}</arcgis-layout-row>`;
+      e = i`<arcgis-layout-row style=${$(a)} ${c(t)} ${s(r)}>${o}</arcgis-layout-row>`;
+      break;
     case "calcite-button":
-      return r`<calcite-button style=${i(a)} ${c(e)} ${$(t)}>${s}</calcite-button>`;
+      e = i`<calcite-button style=${$(a)} ${c(t)} ${s(r)}>${o}</calcite-button>`;
+      break;
     case "calcite-chip":
-      return r`<calcite-chip .label=${n.label} style=${i(a)} ${c(e)} ${$(t)}>${s}</calcite-chip>`;
+      e = i`<calcite-chip .label=${g.label} style=${$(a)} ${c(t)} ${s(r)}>${o}</calcite-chip>`;
+      break;
     case "calcite-avatar":
-      return r`<calcite-avatar style=${i(a)} ${c(e)} ${$(t)}>${s}</calcite-avatar>`;
+      e = i`<calcite-avatar style=${$(a)} ${c(t)} ${s(r)}>${o}</calcite-avatar>`;
+      break;
     case "arcgis-text-card":
-      return r`<arcgis-text-card style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-text-card>`;
+      e = i`<arcgis-text-card style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-text-card>`;
+      break;
     case "arcgis-hub-gallery-card":
-      return r`<arcgis-hub-gallery-card style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-gallery-card>`;
+      e = i`<arcgis-hub-gallery-card style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-gallery-card>`;
+      break;
     case "arcgis-hub-image":
-      return r`<arcgis-hub-image style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-image>`;
+      e = i`<arcgis-hub-image style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-image>`;
+      break;
     case "arcgis-hub-embed-card":
-      return r`<arcgis-hub-embed-card style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-embed-card>`;
+      e = i`<arcgis-hub-embed-card style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-embed-card>`;
+      break;
     case "arcgis-nav-card":
-      return r`<arcgis-nav-card style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-nav-card>`;
+      e = i`<arcgis-nav-card style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-nav-card>`;
+      break;
     case "arcgis-hub-timeline":
-      return r`<arcgis-hub-timeline style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-timeline>`;
+      e = i`<arcgis-hub-timeline style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-timeline>`;
+      break;
     case "arcgis-hub-entity-metadata":
-      return r`<arcgis-hub-entity-metadata style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-metadata>`;
-    // TODO: remove this case once we can configure a catalog
-    // via the arcgis-hub-gallery-card (e.g. once the gallery
-    // card supports optionally showing search & facets)
+      e = i`<arcgis-hub-entity-metadata style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-metadata>`;
+      break;
     case "arcgis-hub-catalog":
-      return r`<arcgis-hub-catalog .catalogs=${n.catalogs} style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-catalog>`;
+      e = i`<arcgis-hub-catalog .catalogs=${g.catalogs} style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-catalog>`;
+      break;
     case "arcgis-hub-map-view":
-      return r`<arcgis-hub-map-view style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-map-view>`;
+      e = i`<arcgis-hub-map-view style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-map-view>`;
+      break;
     case "arcgis-hub-entity-metrics-card":
-      return r`<arcgis-hub-entity-metrics-card .entity=${n.entity} style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-metrics-card>`;
+      e = i`<arcgis-hub-entity-metrics-card .entity=${g.entity} style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-metrics-card>`;
+      break;
     case "arcgis-hub-entity-associations-card":
-      return r`<arcgis-hub-entity-associations-card .entity=${n.entity} style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-associations-card>`;
+      e = i`<arcgis-hub-entity-associations-card .entity=${g.entity} style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-associations-card>`;
+      break;
     case "arcgis-hub-entity-status-card":
-      return r`<arcgis-hub-entity-status-card .entity=${n.entity} style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-status-card>`;
+      e = i`<arcgis-hub-entity-status-card .entity=${g.entity} style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-status-card>`;
+      break;
     case "arcgis-hub-entity-metrics-view":
-      return r`<arcgis-hub-entity-metrics-view style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-metrics-view>`;
+      e = i`<arcgis-hub-entity-metrics-view style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-metrics-view>`;
+      break;
     case "arcgis-hub-project-initiatives-view":
-      return r`<arcgis-hub-project-initiatives-view style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-project-initiatives-view>`;
+      e = i`<arcgis-hub-project-initiatives-view style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-project-initiatives-view>`;
+      break;
     case "arcgis-hub-entity-hero":
-      return r`<arcgis-hub-entity-hero style=${i(a)} ${u} ${c(e)} ${$(t)}>${s}</arcgis-hub-entity-hero>`;
-    // Add more cases as needed
+      e = i`<arcgis-hub-entity-hero style=${$(a)} ${b} ${c(t)} ${s(r)}>${o}</arcgis-hub-entity-hero>`;
+      break;
     case "div":
-      return r`<div .innerHTML=${n.html ?? ""} style=${i(a)} ${c(e)} ${$(t)}></div>`;
+      e = i`<div .innerHTML=${g.html ?? ""} style=${$(a)} ${c(t)} ${s(r)}></div>`;
+      break;
+    // Add more cases as needed
     default:
-      return r`<div style=${i(a)} ${c(e)} ${$(t)}>${s}</div>`;
+      e = i`<div style=${$(a)} ${c(t)} ${s(r)}>${o}</div>`;
   }
+  return d(n(g, "node")) ? e : i`${e}<arcgis-layout-node-overlay .nodeId=${u} type=hidden ${b} ${c(t)}></arcgis-layout-node-overlay>`;
 }
 export {
-  x as ArcgisLayoutNode
+  E as ArcgisLayoutNode
 };

package/dist/components/layouts/components/layout-node/index.d.ts

@@ -13,6 +13,7 @@ import "../../../arcgis-hub-entity-status-card/index.js";
 import "@esri/hub-components/dist/components/arcgis-hub-entity-metrics-view.js";
 import "@esri/hub-components/dist/components/arcgis-hub-project-initiatives-view.js";
 import "@esri/hub-components/dist/components/arcgis-hub-entity-hero.js";
+import "../../../arcgis-layout-node-overlay/index.js";
 import "../../../arcgis-layout-row/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-chip";

package/dist/components/layouts/components/layout-node/index.js

@@ -19,4 +19,5 @@ deferredLoaders.set("arcgis-text-card", () => import("../../../arcgis-text-card/
 .set("arcgis-hub-entity-metrics-view", () => import("@esri/hub-components/dist/components/arcgis-hub-entity-metrics-view.js"))
 .set("arcgis-hub-project-initiatives-view", () => import("@esri/hub-components/dist/components/arcgis-hub-project-initiatives-view.js"))
 .set("arcgis-hub-entity-hero", () => import("@esri/hub-components/dist/components/arcgis-hub-entity-hero.js"))
+.set("arcgis-layout-node-overlay", () => import("../../../arcgis-layout-node-overlay/index.js"))
 ;

package/dist/components/layouts/utils/isNodeVisible.d.ts

@@ -0,0 +1,9 @@
+import { ILayoutNode } from '@esri/hub-common';
+/**
+ * Determines if a layout node is visible based on its
+ * visibility settings
+ *
+ * @param node - layout node
+ * @returns boolean indicating if the node is visible
+ */
+export declare const isNodeVisible: (node: ILayoutNode | undefined) => boolean;