@esri/hub-web-components 0.27.0 → 0.28.1

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

@@ -1,19 +1,19 @@
 import { c as u } from "../../chunks/runtime.js";
 import { html as r } from "lit-html";
-import { LitElement as h, useContextConsumer as p, createEvent as s } from "@arcgis/lumina";
+import { LitElement as h, useContextConsumer as p, createEvent as i } from "@arcgis/lumina";
 import { css as g } from "@lit/reactive-element/css-tag.js";
-import { getWithDefault as i, getProp as o } from "@esri/hub-common";
+import { getWithDefault as o, getProp as s } from "@esri/hub-common";
 import { i as y } from "../../chunks/isNodeVisible.js";
-import { dictionary as l } from "@esri/telemetry-dictionary-hub";
+import { dictionary as a } from "@esri/telemetry-dictionary-hub";
 import { f as c } from "../../chunks/findColumnAndNodeIndex.js";
-import { l as m } from "../../chunks/layoutContext.js";
+import { l as f } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.27/esri/copyright.txt for details.
-v0.27.0 */
-const f = g`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.1 */
+const m = g`:host{position:absolute}.delete-popover-content{padding:0 1rem 1rem;margin:0}`;
 class b extends h {
   constructor() {
-    super(), this.#e = p({ context: m, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.arcgisLayoutDeactivateNode = s(), this.arcgisLayoutDeleteNode = s(), this.arcgisLayoutNodeEditorOpen = s(), this.arcgisLayoutNodeReposition = s(), this.arcgisLayoutNodeVisibilityChange = s(), this.hubTelemetry = s(), this.listen("calcitePopoverOpen", (e) => {
+    super(), this.#e = p({ context: f, subscribe: !0 }), this.isEditMode = !1, this.isLayoutValid = !0, this.arcgisLayoutDeactivateNode = i(), this.arcgisLayoutDeleteNode = i(), this.arcgisLayoutNodeEditorOpen = i(), this.arcgisLayoutNodeReposition = i(), this.arcgisLayoutNodeVisibilityChange = i(), this.hubTelemetry = i(), this.listen("calcitePopoverOpen", (e) => {
       e.stopPropagation();
     }), this.listen("calcitePopoverClose", (e) => {
       e.stopPropagation(), this.arcgisLayoutDeactivateNode.emit({
@@ -25,7 +25,7 @@ class b extends h {
     this.properties = { isEditMode: 5, isLayoutValid: 5, node: 0, activatedNode: 0, layoutElement: 0, messages: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = f;
+    this.styles = m;
   }
   #e;
   get #t() {
@@ -61,7 +61,7 @@ class b extends h {
   }
   _onOpenEditorButtonClick() {
     this.arcgisLayoutNodeEditorOpen.emit({ node: this.node, element: this.layoutElement }), this.hubTelemetry.emit({
-      ...l.category.interaction.action.open.label.sidePanel,
+      ...a.category.interaction.action.open.label.sidePanel,
       details: this.layoutNodeConfig.name
     });
   }
@@ -73,7 +73,7 @@ class b extends h {
     });
     const e = this._isNodeVisible ? "disable" : "enable";
     this.hubTelemetry.emit({
-      ...l.category.interaction.action[e].label.visibility,
+      ...a.category.interaction.action[e].label.visibility,
       details: this.layoutNodeConfig.name
     });
   }
@@ -85,7 +85,7 @@ class b extends h {
   }
   _onDeleteButtonClick() {
     this.hubTelemetry.emit({
-      ...l.category.interaction.action.open.label.popover,
+      ...a.category.interaction.action.open.label.popover,
       details: `Delete ${this.layoutNodeConfig.name}`
     });
   }
@@ -93,7 +93,7 @@ class b extends h {
     this.arcgisLayoutDeleteNode.emit({
       id: this.node.id
     }), this.hubTelemetry.emit({
-      ...l.category.content.action.delete.label.layoutNode,
+      ...a.category.content.action.delete.label.layoutNode,
       details: this.layoutNodeConfig.name
     });
   }
@@ -101,14 +101,14 @@ class b extends h {
     let e;
     const t = this.layoutNodeConfig;
     if (this.isEditMode && this.node && t && this.layoutElement) {
-      const a = this.messages.layoutNodeControls.a11yLabel || "";
+      const l = this.messages.layoutNodeControls.a11yLabel || "";
       let n = "overlay";
       this.node.tag === "arcgis-nav-card" && (n = this.layoutElement.querySelector("calcite-tab-nav"));
       const d = this.layoutNodeEditorRef ? {
         initialFocus: this.layoutNodeEditorRef,
         extraContainers: [this.layoutNodeEditorRef]
       } : void 0;
-      e = r`<calcite-popover auto-close .focusTrapOptions=${d} offset-distance=0 .label=${a} .open=${this.node.id === this.activatedNode?.id} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${n} trigger-disabled><calcite-action-bar expand-disabled floating layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${i(t, "i18n.label", this.messages.layoutNodeControls.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${t.disableAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? i(t, "i18n.hideLabel", o(this.messages, "layoutNodeControls.configurableNodes.hide.up")) : i(t, "i18n.showLabel", o(this.messages, "layoutNodeControls.configurableNodes.show.up"))}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${i(t, "i18n.repositionUpLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.up"))}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.moveDownTooltipText}><calcite-action .disabled=${!this.#o} icon=arrow-down @click=${this._onMoveDownButtonClick} .text=${i(t, "i18n.repositionDownLabel", o(this.messages, "layoutNodeControls.configurableNodes.default.down"))}></calcite-action></arcgis-ref-tooltip>${t.editor && r`<arcgis-ref-tooltip .text=${this.node.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node.readOnly || t.disableEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${i(t, "i18n.edit", o(this.messages, "layoutNodeControls.configurableNodes.default.edit"))}></calcite-action></arcgis-ref-tooltip>` || ""}<arcgis-ref-tooltip .text=${this.deleteTooltipText}><calcite-action .disabled=${this.node.readOnly || t.disableDelete} icon=trash id=delete-button @click=${this._onDeleteButtonClick} .text=${i(t, "i18n.delete", o(this.messages, "layoutNodeControls.configurableNodes.default.delete"))}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${d} .heading=${o(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${o(this.messages, "layoutNodeControls.deletePopover.heading")} offset-distance=2 overlay-positioning=fixed placement=bottom-start pointer-disabled reference-element=delete-button><div class="delete-popover-content"><p>${o(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${o(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
+      e = r`<calcite-popover .focusTrapOptions=${d} offset-distance=0 .label=${l} .open=${this.node.id === this.activatedNode?.id} overlay-positioning=fixed placement=top-start pointer-disabled .referenceElement=${n} trigger-disabled><calcite-action-bar expand-disabled floating layout=horizontal overflow-actions-disabled overlay-positioning=absolute><calcite-action-group><calcite-action .text=${o(t, "i18n.label", this.messages.configurableNodes.default.label)} text-enabled></calcite-action></calcite-action-group><calcite-action-group><calcite-action .disabled=${t.disableAdjustVisibility} .icon=${this._isNodeVisible ? "view-visible" : "view-hide"} @click=${this._onToggleVisibilityClick} .text=${this._isNodeVisible ? o(t, "i18n.hideLabel", this.messages.configurableNodes.default.hide) : o(t, "i18n.showLabel", this.messages.configurableNodes.default.show)}></calcite-action><arcgis-ref-tooltip .text=${this.moveUpTooltipText}><calcite-action .disabled=${!this.#t} icon=arrow-up @click=${this._onMoveUpButtonClick} .text=${o(t, "i18n.repositionUpLabel", this.messages.configurableNodes.default.up)}></calcite-action></arcgis-ref-tooltip><arcgis-ref-tooltip .text=${this.moveDownTooltipText}><calcite-action .disabled=${!this.#o} icon=arrow-down @click=${this._onMoveDownButtonClick} .text=${o(t, "i18n.repositionDownLabel", this.messages.configurableNodes.default.down)}></calcite-action></arcgis-ref-tooltip>${t.editor && r`<arcgis-ref-tooltip .text=${this.node.readOnly ? "Metadata must be updated in the workspace" : ""}><calcite-action .disabled=${this.node.readOnly || t.disableEdit || !this.isLayoutValid} icon=pencil @click=${this._onOpenEditorButtonClick} .text=${o(t, "i18n.edit", this.messages.configurableNodes.default.edit)}></calcite-action></arcgis-ref-tooltip>` || ""}<arcgis-ref-tooltip .text=${this.deleteTooltipText}><calcite-action .disabled=${this.node.readOnly || t.disableDelete} icon=trash id=delete-button @click=${this._onDeleteButtonClick} .text=${o(t, "i18n.delete", this.messages.configurableNodes.default.delete)}></calcite-action></arcgis-ref-tooltip><calcite-popover .focusTrapOptions=${d} .heading=${s(this.messages, "layoutNodeControls.deletePopover.heading")} .label=${s(this.messages, "layoutNodeControls.deletePopover.heading")} offset-distance=2 overlay-positioning=fixed placement=bottom-start pointer-disabled reference-element=delete-button><div class="delete-popover-content"><p>${s(this.messages, "layoutNodeControls.deletePopover.body")}</p><calcite-button alignment=center appearance=outline-fill kind=danger @click=${this._onDeleteConfirmButtonClick} round width=full>${s(this.messages, "layoutNodeControls.deletePopover.button")}</calcite-button></div></calcite-popover></calcite-action-group></calcite-action-bar></calcite-popover>`;
     }
     return e;
   }

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

@@ -1,24 +1,24 @@
 import { c as n } from "../../chunks/runtime.js";
 import { LitElement as u, useContextConsumer as d, createEvent as l, noShadowRoot as c } from "@arcgis/lumina";
-import { getProp as s, mergeObjects as h, getWithDefault as a } from "@esri/hub-common";
-import { createRef as g, ref as f } from "lit/directives/ref.js";
+import { getProp as s, deepMerge as h, cloneObject as g, getWithDefault as a } from "@esri/hub-common";
+import { createRef as f, ref as C } from "lit/directives/ref.js";
 import { html as r } from "lit";
-import { css as C } from "@lit/reactive-element/css-tag.js";
+import { css as p } from "@lit/reactive-element/css-tag.js";
 import { ArcgisLayoutNodeEditorDynamicTag as m } from "./layout-node-editor-dynamic-tag/customElement.js";
-import { l as p } from "../../chunks/layoutContext.js";
+import { l as v } from "../../chunks/layoutContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.27/esri/copyright.txt for details.
-v0.27.0 */
-const v = C`@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 u {
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.1 */
+const y = p`@layer{arcgis-configuration-editor:focus{--focus-color: var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:solid 2px var(--focus-color)}}`;
+class E extends u {
   constructor() {
-    super(...arguments), this._configEditorRef = g(), this.#o = d({ context: p }), this._values = {}, this.arcgisLayoutNodeChange = l();
+    super(...arguments), this._configEditorRef = f(), this.#o = d({ context: v }), this._values = {}, this.arcgisLayoutNodeChange = l();
   }
   static {
     this.properties = { _values: 16, node: 0, layoutNodeConfig: 0 };
   }
   static {
-    this.styles = v;
+    this.styles = y;
   }
   static {
     this.shadowRootOptions = c;
@@ -47,10 +47,10 @@ class y extends u {
   }
   _handleConfigurationEditorChange(o) {
     o.stopPropagation();
-    const { values: t = {}, valid: i } = o.detail, e = h(t, this._values);
+    const { values: t = {}, valid: i } = o.detail, e = h(this._values, t);
     this._values = e, this.arcgisLayoutNodeChange.emit({
       layoutNodeConfig: this.layoutNodeConfig,
-      values: e,
+      values: g(e),
       valid: i,
       id: this.node.id
     });
@@ -62,13 +62,13 @@ class y extends u {
       onInputChangeEvent: this._handleConfigurationEditorChange,
       [t]: this._values,
       ...this.layoutNodeConfig.editor.properties || {}
-    } }) : r`<arcgis-configuration-editor @keydown=${(i) => i.stopPropagation()} @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${f(this._configEditorRef)}></arcgis-configuration-editor>`;
+    } }) : r`<arcgis-configuration-editor @keydown=${(i) => i.stopPropagation()} @arcgisConfigurationEditorChange=${this._handleConfigurationEditorChange} @arcgisConfigurationEditorInitialized=${this._handleConfigurationEditorChange} .schema=${this.layoutNodeConfig?.editor?.schema || { type: "object", properties: {} }} .t=${this.t()} .uiSchema=${this.layoutNodeConfig?.editor?.uiSchema} .values=${this._values} ${C(this._configEditorRef)}></arcgis-configuration-editor>`;
   }
   render() {
     return !this.node || !this.layoutNodeConfig ? r`<arcgis-skeleton-loader active rows=3></arcgis-skeleton-loader>` : this.renderEditor();
   }
 }
-n("arcgis-layout-node-editor", y);
+n("arcgis-layout-node-editor", E);
 export {
-  y as ArcgisLayoutNodeEditor
+  E as ArcgisLayoutNodeEditor
 };

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

@@ -1,8 +1,8 @@
 import { html as t } from "lit-html";
 import { spreadProps as d, spreadEvents as o } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.27/esri/copyright.txt for details.
-v0.27.0 */
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.1 */
 function g({ tagName: c, props: r }) {
   const n = r.onInputChangeEvent || void 0, a = {
     ...r

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

@@ -1,9 +1,9 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { HTMLConfigurableLayoutNodeElement, LayoutNode } from '@esri/hub-common';
+import { HTMLConfigurableLayoutNodeElement, ILayoutNodeConfig, LayoutNode } from '@esri/hub-common';
 import { ArcgisLayoutContainer } from '../arcgis-layout-container/customElement.js';
-import { IAddLayoutNodeConfiguration } from '../layouts/utils/getAddableLayoutNodes';
 import { ILayoutNodeActivateEventDetail, ILayoutNodeAddEventDetail } from '../layouts/utils/layout-event-types';
+import { PropertyValues } from 'lit';
 
 /** @private */
 export declare class ArcgisLayoutNodeWrapper extends LitElement {

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

@@ -1,114 +1,25 @@
-import { g as m, c as f } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-import { LitElement as y, useContextConsumer as b, createEvent as c, safeClassMap as n, nothing as d } from "@arcgis/lumina";
-import { css as v } from "@lit/reactive-element/css-tag.js";
-import { checkPermission as N, getProp as l, cloneObject as $, getWithDefault as w } from "@esri/hub-common";
-import { l as x } from "../../chunks/layoutContext.js";
-import { g as C, i as _ } from "../../chunks/interpolate-translations.js";
-import { m as E, i as P } from "../../chunks/memoizeAsync.js";
-import { dictionary as h } from "@esri/telemetry-dictionary-hub";
-import { g as L } from "../../chunks/state.js";
-import { slotChangeGetAssignedElements as A } from "@arcgis/toolkit/dom";
-import { i as O } from "../../chunks/isNodeVisible.js";
+import { c } from "../../chunks/runtime.js";
+import { LitElement as h, useContextConsumer as u, createEvent as s, nothing as l, safeClassMap as n } from "@arcgis/lumina";
+import { css as p } from "@lit/reactive-element/css-tag.js";
+import { cloneObject as f, getWithDefault as d } from "@esri/hub-common";
+import { l as g } from "../../chunks/layoutContext.js";
+import { g as v, a as m, i as b } from "../../chunks/interpolate-translations.js";
+import { g as y } from "../../chunks/state.js";
+import { dictionary as N } from "@esri/telemetry-dictionary-hub";
+import { slotChangeGetAssignedElements as w } from "@arcgis/toolkit/dom";
+import { i as C } from "../../chunks/isNodeVisible.js";
+import { html as i } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.27/esri/copyright.txt for details.
-v0.27.0 */
-const k = v`calcite-label{position:fixed;position-anchor:--highlight-anchor;bottom:calc(anchor(top) + 4px);top:calc(anchor(top) - 30px);background-color:#fff;padding:.25rem .5rem;--tw-shadow: var(--calcite-shadow-md);--tw-shadow-colored: var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#overlay{position:fixed;position-anchor:--highlight-anchor;position-area:center;width:anchor-size(width);height:anchor-size(height);display:flex;justify-content:center;align-items:center}#overlay.hidden{background-color:#fff6;outline:1.5px dashed var(--calcite-color-border-1);calcite-chip{opacity:1}}#add-button{position:fixed;position-anchor:--highlight-anchor;justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - 15px);z-index:2}.slot-container{display:flex;flex:1;min-width:0;anchor-name:--highlight-anchor}:host{calcite-label,calcite-button{opacity:0}display:flex}::slotted(*){flex:1;min-width:0}#overlay:focus-visible{outline:none}:host([is-edit-mode]):has(.is-focused){calcite-label{opacity:1}}:host([is-edit-mode]:hover):not(:has(arcgis-nav-card)),:host([is-edit-mode]:focus):not(:has(arcgis-nav-card)){--calcite-internal-color-focus: var(--calcite-ui-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px;calcite-label,calcite-button{opacity:1}}:host([is-edit-mode]):has(#overlay.activated){--calcite-internal-color-focus: var(--calcite-ui-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}.popover-content{max-height:19.3rem;overflow-y:auto}calcite-list-item{--calcite-list-border-color: transparent}`, s = h.category.interaction.action.select.label.layoutNode, M = [
-  {
-    tag: "arcgis-text-card",
-    label: "{{layoutNodeControls.configurableNodes.text.label:translate}}",
-    icon: "text",
-    defaults: {
-      html: "<p>{{layoutNodeControls.configurableNodes.text.default:translate}}</p>"
-    },
-    telemetry: {
-      ...s,
-      details: "Text card"
-    }
-  },
-  {
-    tag: "arcgis-hub-image",
-    label: "{{layoutNodeControls.configurableNodes.image.label:translate}}",
-    icon: "image",
-    defaults: {
-      src: "",
-      fallback: "{{assetPath}}images/image-card-placeholder.svg"
-    },
-    telemetry: {
-      ...s,
-      details: "Image card"
-    }
-  },
-  {
-    tag: "arcgis-hub-embed-card",
-    label: "{{layoutNodeControls.configurableNodes.embed.label:translate}}",
-    icon: "embedded-content",
-    telemetry: {
-      ...s,
-      details: "Embed card"
-    }
-  },
-  {
-    tag: "arcgis-hub-gallery-card",
-    label: "{{layoutNodeControls.configurableNodes.gallery.label:translate}}",
-    icon: "gallery",
-    defaults: {
-      // NOTE: i don't know if this is what we want - just trying to find something workable for now
-      showEmptyState: !0,
-      cardConfig: {
-        appearance: {
-          layout: "grid-filled"
-        },
-        shouldLimitResults: !0,
-        limit: 5,
-        query: {
-          targetEntity: "item",
-          layout: "grid-filled",
-          filters: [
-            {
-              predicates: [{ orgid: ["{{context.portal.id}}"] }]
-            }
-          ]
-        }
-      }
-    },
-    telemetry: {
-      ...s,
-      details: "Gallery card"
-    }
-  }
-  // {
-  //   tag: "arcgis-hub-timeline",
-  //   label: "Timeline",
-  //   icon: "timeline-icon",
-  // },
-  // {
-  //   tag: "arcgis-hub-entity-metadata",
-  //   label: "Entity Metadata",
-  //   icon: "entity-metadata-icon",
-  // },
-  // {
-  //   tag: "arcgis-hub-entity-status-card",
-  //   label: "Entity Status Card",
-  //   icon: "entity-status-card-icon",
-  // },
-];
-async function F(u, e, t) {
-  let i = M.filter((r) => !r.permissions || r.permissions.length === 0 ? !0 : r.permissions.every((p) => N(p, t).access));
-  const a = {
-    context: t,
-    entity: e.entity ?? {},
-    assetPath: l(e, "assetPath")
-  }, g = {
-    messages: l(e, "translations"),
-    assetPath: l(e, "assetPath")
-  };
-  return i = P(i, a, g), await Promise.resolve(i);
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.1 */
+const $ = p`calcite-label{position:fixed;position-anchor:--highlight-anchor;bottom:calc(anchor(top) + 4px);top:calc(anchor(top) - 30px);background-color:#fff;padding:.25rem .5rem;--tw-shadow: var(--calcite-shadow-md);--tw-shadow-colored: var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#aria-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#overlay{position:absolute;position-anchor:--highlight-anchor;position-area:center;width:anchor-size(width);height:anchor-size(height);display:flex;justify-content:center;align-items:center}#overlay.hidden{background-color:#fff6;outline:1.5px dashed var(--calcite-color-border-1);calcite-chip{opacity:1}}#add-button{position:fixed;position-anchor:--highlight-anchor;justify-self:anchor-center;inset-block-start:calc(anchor(bottom) - 15px);z-index:2}.slot-container{display:flex;flex:1;min-width:0;anchor-name:--highlight-anchor}:host{calcite-label,calcite-button{opacity:0}display:flex}::slotted(*){flex:1;min-width:0}#overlay:focus-visible{outline:none}:host([is-edit-mode]):has(.is-focused){calcite-label{opacity:1}}:host([is-edit-mode]:not([activated],[has-nav-card]):hover),:host([is-edit-mode]:not([activated],[has-nav-card]):focus){--calcite-internal-color-focus: var(--calcite-ui-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px;calcite-label,calcite-button{opacity:1}}:host([is-edit-mode][activated]:not([has-nav-card])){--calcite-internal-color-focus: var(--calcite-ui-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px}.popover-content{max-height:19.3rem;overflow-y:auto}calcite-list-item{--calcite-list-border-color: transparent}`;
+function x(r = {}, e) {
+  const t = v(r);
+  return Object.values(t).filter((o) => !o.hideAdd);
 }
-const S = E(F);
-class T extends y {
+class _ extends h {
   constructor() {
-    super(), this.#e = b({ context: x }), this.isPopoverOpen = !1, this.isFocused = !1, this.isEditMode = !1, this.arcgisLayoutActivateNode = c(), this.arcgisLayoutAddNode = c(), this.hubTelemetry = c(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
+    super(), this.#e = u({ context: g }), this.isPopoverOpen = !1, this.isFocused = !1, this.isEditMode = !1, this.arcgisLayoutActivateNode = s(), this.arcgisLayoutAddNode = s(), this.hubTelemetry = s(), this.listen("calcitePopoverBeforeOpen", this.loadConfig), this.listen("calcitePopoverOpen", (e) => {
       this.isPopoverOpen = !0;
     }), this.listen("calcitePopoverClose", (e) => {
       this.isPopoverOpen = !1;
@@ -118,7 +29,7 @@ class T extends y {
     this.properties = { layoutElement: 16, config: 16, isPopoverOpen: 16, isFocused: 16, node: 0, activatedNode: 0, isEditMode: 7 };
   }
   static {
-    this.styles = k;
+    this.styles = $;
   }
   #e;
   get _messages() {
@@ -127,25 +38,35 @@ class T extends y {
   get _layoutNodeConfig() {
     if (!this.layoutElement || !this.node)
       return;
-    let e = C(this.layoutElement, this.node);
-    return e && (e = _(this._messages, e)), $(e);
+    let e = m(this.layoutElement.tagName.toLowerCase(), this.#e.value, this._context);
+    return e && (e = b(this._messages, e)), f(e);
+  }
+  get ariaCardDescription() {
+    let e = "";
+    if (this.layoutElement) {
+      const t = this.layoutElement.ariaCardDescription;
+      t ? e = t : this.layoutElement.shadowRoot ? e = this.layoutElement.shadowRoot.textContent || "" : e = this.layoutElement.textContent || "";
+    }
+    return e;
   }
   get isNodeVisible() {
     let e = !0;
-    return this.isEditMode && !O(this.node) && (e = !1), e;
+    return this.isEditMode && !C(this.node) && (e = !1), e;
   }
   get _context() {
-    return L();
+    return y();
+  }
+  updated(e) {
+    (e.has("activatedNode") || e.has("node")) && (this.node?.id === this.activatedNode?.id ? this.el.setAttribute("activated", "true") : this.el.removeAttribute("activated")), e.has("node") && (this.node?.tag === "arcgis-nav-card" ? this.el.setAttribute("has-nav-card", "true") : this.el.removeAttribute("has-nav-card"));
   }
   _handleSlotChange(e) {
-    this.layoutElement = A(e)[0];
+    this.layoutElement = w(e)[0];
   }
   _handlePopoverOpen() {
-    this.hubTelemetry.emit(h.category.interaction.action.open.label.dialog.details.addLayoutNode);
+    this.hubTelemetry.emit(N.category.interaction.action.open.label.dialog.details.addLayoutNode);
   }
-  async loadConfig() {
-    const e = m("assets/layout-container/");
-    this.config || (this.config = await S({}, { translations: this._messages, assetPath: e }, this._context));
+  loadConfig() {
+    this.config || (this.config = x(this.#e.value, this._context));
   }
   _handleNodeFocus(e) {
     this.isFocused = e.detail;
@@ -159,12 +80,12 @@ class T extends y {
     (e.key === "Enter" || e.key === " ") && this._handleNodeClick(e);
   }
   async _handleListItemSelect(e) {
-    const t = e.target.dataset.tag, i = this.config?.find((a) => a.tag === t);
-    if (this.node && i) {
+    const t = e.target.dataset.tag, o = this.config?.find((a) => a.tag === t);
+    if (this.node && o) {
       const a = {
         adjacentNode: this.node,
         position: "after",
-        config: i
+        config: o
       };
       this.arcgisLayoutAddNode.emit(a);
     }
@@ -173,39 +94,39 @@ class T extends y {
   renderLabel() {
     let e;
     if (this.isEditMode && this.node) {
-      const t = w(this._layoutNodeConfig ?? {}, "i18n.label", l(this._messages, "layoutNodeControls.configurableNodes.default.label"));
-      e = o`<calcite-label scale=l>${t}</calcite-label>`;
+      const t = d(this._layoutNodeConfig ?? {}, "i18n.label", this._messages.configurableNodes.default.label);
+      e = i`<calcite-label aria-hidden=true scale=l>${t}</calcite-label>`;
     }
     return e;
   }
   renderOverlay() {
     let e;
     if (this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card") {
-      const t = this._messages.layoutNodeHidden;
-      e = o`<div id=overlay class=${n({ hidden: !this.isNodeVisible, activated: this.node.id === this.activatedNode?.id })} @click=${this._handleNodeClick} @keydown=${this._handleNodeKeyDown} tabindex=0>${this.isNodeVisible ? null : o`<calcite-chip appearance=solid icon=view-hide .label=${t}>${t}</calcite-chip>`}</div>`;
+      const t = this._messages.layoutNodeHidden, o = d(this._layoutNodeConfig ?? {}, "i18n.ariaLabel", this._messages.configurableNodes.default.ariaLabel);
+      e = i`<div aria-describedby=aria-description aria-label=${o ?? l} id=overlay class=${n({ hidden: !this.isNodeVisible })} @click=${this._handleNodeClick} @keydown=${this._handleNodeKeyDown} role=button tabindex=0><span id=aria-description>${this.ariaCardDescription}</span>${this.isNodeVisible ? null : i`<calcite-chip appearance=solid icon=view-hide .label=${t}>${t}</calcite-chip>`}</div>`;
     }
     return e;
   }
   renderNodeControls() {
     let e;
-    return this.isEditMode && this.node && (e = o`<arcgis-layout-node-controls .activatedNode=${this.activatedNode} .isEditMode=${this.isEditMode} .isLayoutValid=${this.#e.value.isLayoutValid} .layout=${this.#e.value.layout} .layoutNodeConfig=${this._layoutNodeConfig} .messages=${this._messages} .node=${this.node} .layoutElement=${this.layoutElement} style="position: absolute;"></arcgis-layout-node-controls>`), e;
+    return this.isEditMode && this.node && (e = i`<arcgis-layout-node-controls .activatedNode=${this.activatedNode} .isEditMode=${this.isEditMode} .isLayoutValid=${this.#e.value.isLayoutValid} .layout=${this.#e.value.layout} .layoutNodeConfig=${this._layoutNodeConfig} .messages=${this._messages} .node=${this.node} .layoutElement=${this.layoutElement} style="position: absolute;"></arcgis-layout-node-controls>`), e;
   }
   renderAddButton() {
     let e;
-    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = o`<calcite-button icon-start=plus id=add-button .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
+    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = i`<calcite-button icon-start=plus id=add-button .label=${this._messages.addButtonLabel} round></calcite-button>`), e;
   }
   renderAddPopover() {
     let e;
-    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = o`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} @calcitePopoverOpen=${this._handlePopoverOpen} .open=${this.isPopoverOpen} reference-element=add-button><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => o`<calcite-list-item data-tag=${t.tag ?? d} .disabled=${t.disabled} icon-start=${t.icon ?? d} .label=${t.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
+    return this.isEditMode && this.node && this.node.tag !== "arcgis-nav-card" && (e = i`<calcite-popover auto-close .heading=${this._messages.addElementPopoverHeading} .label=${this._messages.addElementPopoverLabel} @calcitePopoverOpen=${this._handlePopoverOpen} .open=${this.isPopoverOpen} reference-element=add-button><div class="popover-content"><calcite-list .label=${this._messages.addElementListLabel}>${this.config?.map((t) => i`<calcite-list-item data-tag=${t.tag ?? l} .disabled=${t.disableAdd} icon-start=${t.icon ?? l} .label=${t.i18n.label} @calciteListItemSelect=${this._handleListItemSelect}></calcite-list-item>`)}</calcite-list></div></calcite-popover>`), e;
   }
   render() {
-    return o`${this.renderLabel()}<div class=${n({
+    return i`${this.renderLabel()}<div class=${n({
       "slot-container": !0,
       "is-focused": this.isFocused
     })}><slot @slotchange=${this._handleSlotChange}></slot></div>${this.renderOverlay()}${this.renderAddButton()}${this.renderAddPopover()}${this.renderNodeControls()}`;
   }
 }
-f("arcgis-layout-node-wrapper", T);
+c("arcgis-layout-node-wrapper", _);
 export {
-  T as ArcgisLayoutNodeWrapper
+  _ as ArcgisLayoutNodeWrapper
 };

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

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

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { IConfigurableLayoutNode, ILayoutNode, ILayoutNodeConfig, ISection, ITranslationMap, LayoutUtils } from '@esri/hub-common';
+import { IConfigurableLayoutNode, ILayoutNode, ISection, ITranslationMap, LayoutUtils } from '@esri/hub-common';
 import { ILayoutNodeActivateEventDetail } from '../layouts/utils/layout-event-types';
 
 /**
@@ -14,7 +14,6 @@ import { ILayoutNodeActivateEventDetail } from '../layouts/utils/layout-event-ty
  * enabling deep linking).
  */
 export declare class ArcgisNavCard extends LitElement {
-    readonly layoutNodeConfig: ILayoutNodeConfig;
     node: ILayoutNode;
     /** The sections to render within the nav card */
     sections: ISection[];

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

@@ -1,23 +1,23 @@
-import { c as h } from "../../chunks/runtime.js";
+import { c as u } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
-import { LitElement as v, createEvent as d, noShadowRoot as b, safeClassMap as r, nothing as n, safeStyleMap as f } from "@arcgis/lumina";
+import { LitElement as v, createEvent as r, noShadowRoot as b, safeClassMap as d, nothing as n, safeStyleMap as f } from "@arcgis/lumina";
 import { css as m } from "@lit/reactive-element/css-tag.js";
 import { u as g } from "../../chunks/useT9n.js";
-import { getProp as u } from "@esri/hub-common";
+import { getProp as h } from "@esri/hub-common";
 import { i as p } from "../../chunks/isNodeVisible.js";
-import { b as N } from "../../chunks/getResponsiveClasses.js";
+import { b as $ } from "../../chunks/getResponsiveClasses.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.27/esri/copyright.txt for details.
-v0.27.0 */
-const $ = m`@layer{arcgis-nav-card{display:block}arcgis-nav-card[is-edit-mode] calcite-tab-nav:hover,arcgis-nav-card[is-edit-mode] calcite-tab-nav:focus{--calcite-internal-color-focus: var(--calcite-ui-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px}arcgis-nav-card[is-edit-mode] calcite-tab-nav.activated{--calcite-internal-color-focus: var(--calcite-ui-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}}`;
-function _(a, t, i, e) {
+See https://js.arcgis.com/0.28/esri/copyright.txt for details.
+v0.28.1 */
+const _ = m`@layer{arcgis-nav-card{display:block}arcgis-nav-card[is-edit-mode] calcite-tab-nav:hover,arcgis-nav-card[is-edit-mode] calcite-tab-nav:focus{--calcite-internal-color-focus: var(--calcite-ui-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px}arcgis-nav-card[is-edit-mode] calcite-tab-nav.activated{--calcite-internal-color-focus: var(--calcite-ui-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}}`;
+function N(a, t, i, e) {
   {
     let s = a;
-    const c = u(e, `${t}.${a}`);
+    const c = h(e, `${t}.${a}`);
     if (c)
       s = c;
     else {
-      const l = u(i, a);
+      const l = h(i, a);
       l && (s = l);
     }
     return s;
@@ -25,34 +25,16 @@ function _(a, t, i, e) {
 }
 class y extends v {
   constructor() {
-    super(...arguments), this._messages = g(), this.layoutNodeConfig = {
-      tag: "arcgis-nav-card",
-      name: "Nav Card",
-      disableEdit: !1,
-      disableMove: !1,
-      disableAdjustVisibility: !1,
-      disableDelete: !1,
-      // valuesProp: "data",
-      defaults: {},
-      i18n: {
-        label: "Nav card",
-        description: "A card for navigation",
-        editLabel: "Edit nav card",
-        deleteLabel: "Delete nav card",
-        repositionUpLabel: "Move nav card up",
-        repositionDownLabel: "Move nav card down"
-      }
-      // editor: {}
-    }, this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1, this.arcgisLayoutActivateNode = d(), this.arcgisLayoutNodeFocus = d();
+    super(...arguments), this._messages = g(), this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1, this.arcgisLayoutActivateNode = r(), this.arcgisLayoutNodeFocus = r();
   }
   static {
-    this.properties = { layoutNodeConfig: 32, node: 0, sections: 0, translations: 0, isEditMode: 7, activatedNode: 0, utils: 0, debug: 5 };
+    this.properties = { node: 0, sections: 0, translations: 0, isEditMode: 7, activatedNode: 0, utils: 0, debug: 5 };
   }
   static {
     this.shadowRootOptions = b;
   }
   static {
-    this.styles = $;
+    this.styles = _;
   }
   get _visibleSections() {
     return this.sections.filter((t) => p(t));
@@ -75,17 +57,17 @@ class y extends v {
     this.arcgisLayoutNodeFocus.emit(!1);
   }
   _getSectionClasses(t) {
-    return N(t);
+    return $(t);
   }
   renderTabs() {
     let t;
-    return this._hasSections && (t = o`<calcite-tabs scale=l><calcite-tab-nav class=${r({ activated: this.node.id === this.activatedNode?.id })} data-node-id=${this.node.id ?? n} @click=${this.isEditMode ? this._handleNodeClick : void 0} @keydown=${this.isEditMode ? this._handleNodeKeyDown : void 0} @mouseenter=${this.isEditMode ? this._handleTabNavFocus : void 0} @mouseleave=${this.isEditMode ? this._handleTabNavDefocus : void 0} @focus=${this.isEditMode ? this._handleTabNavFocus : void 0} @blur=${this.isEditMode ? this._handleTabNavDefocus : void 0} slot=title-group tabindex=${(this.isEditMode ? 0 : void 0) ?? n}>${this._visibleSections.map((i, e) => o`<calcite-tab-title .selected=${e === 0} .tab=${i.label}>${_(i.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((i, e) => o`<calcite-tab .selected=${e === 0} .tab=${i.label}><arcgis-layout-section class=${r(this._getSectionClasses(i).join(" "))} .activatedNode=${this.activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${i} style=${f(i.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), t;
+    return this._hasSections && (t = o`<calcite-tabs scale=l><calcite-tab-nav class=${d({ activated: this.node.id === this.activatedNode?.id })} data-node-id=${this.node.id ?? n} @click=${this.isEditMode ? this._handleNodeClick : void 0} @keydown=${this.isEditMode ? this._handleNodeKeyDown : void 0} @mouseenter=${this.isEditMode ? this._handleTabNavFocus : void 0} @mouseleave=${this.isEditMode ? this._handleTabNavDefocus : void 0} @focus=${this.isEditMode ? this._handleTabNavFocus : void 0} @blur=${this.isEditMode ? this._handleTabNavDefocus : void 0} slot=title-group tabindex=${(this.isEditMode ? 0 : void 0) ?? n}>${this._visibleSections.map((i, e) => o`<calcite-tab-title .selected=${e === 0} .tab=${i.label}>${N(i.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((i, e) => o`<calcite-tab .selected=${e === 0} .tab=${i.label}><arcgis-layout-section class=${d(this._getSectionClasses(i).join(" "))} .activatedNode=${this.activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${i} style=${f(i.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), t;
   }
   render() {
     return this.renderTabs();
   }
 }
-h("arcgis-nav-card", y);
+u("arcgis-nav-card", y);
 export {
   y as ArcgisNavCard
 };

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 { IConfigurableLayoutNode, ILayoutNodeConfig } from '@esri/hub-common';
+import { IConfigurableLayoutNode } from '@esri/hub-common';
 
 /**
  * A text card that can be added to an ILayout or leveraged
@@ -8,13 +8,6 @@ import { IConfigurableLayoutNode, ILayoutNodeConfig } from '@esri/hub-common';
  * to prevent XSS attacks.
  */
 export declare class ArcgisTextCard extends LitElement {
-    /**
-     * The text card is a configurable node in the
-     * layout system. The following read-only property
-     * provides configuration information to the
-     * layout editor.
-     */
-    get layoutNodeConfig(): ILayoutNodeConfig;
     /**
      * The HTML content to display - this will be
      * sanitized before rendering.