@esri/hub-web-components 0.36.2 → 0.37.0

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

@@ -1,14 +1,12 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as u } from "../../chunks/runtime.js";
-import { html as s } from "lit-html";
-import { keyed as e } from "lit-html/directives/keyed.js";
+import { html as s } from "lit";
+import { keyed as e } from "lit/directives/keyed.js";
 import { LitElement as l, noShadowRoot as g, safeClassMap as i, safeStyleMap as m } from "@arcgis/lumina";
 import { i as p } from "../../chunks/typeGuards.js";
 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.36/esri/copyright.txt for details.
-v0.36.2 */
 class y extends l {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;

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

@@ -1,7 +1,8 @@
-/// <reference types="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { IConfigurableLayoutNode, ILayoutNode, ISection, ITranslationMap, LayoutUtils } from '@esri/hub-common';
-import { ILayoutNodeActivateEventDetail } from '../layouts/utils/layout-event-types';
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ILayoutNode, ISection, ITranslationMap, LayoutUtils } from "@esri/hub-common";
+import type { ILayoutNodeActivateEventDetail } from "../layouts/utils/layout-event-types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
  * The nav card is intended to render various
@@ -13,40 +14,50 @@ import { ILayoutNodeActivateEventDetail } from '../layouts/utils/layout-event-ty
  * a different tab should update the URL, thereby
  * enabling deep linking).
  */
-export declare class ArcgisNavCard extends LitElement {
-    node: ILayoutNode;
-    /** The sections to render within the nav card */
-    sections: ISection[];
-    /**
-     * Customer provided translations to override the
-     * default strings.
-     */
-    translations: ITranslationMap;
-    /**
-     * Whether the parent layout is in edit mode
-     *
-     * @default false
-     */
-    isEditMode: boolean;
-    /**
-     * The layout node that is currently activated for editing. This is
-     * tracked in order to show the node's configuration
-     * controls and "active" state in the UI.
-     */
-    activatedNode?: ILayoutNode;
-    /**
-     * 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;
-    /**
-     * Enables debug mode
-     *
-     * @default false
-     */
-    debug: boolean;
-    readonly arcgisLayoutActivateNode: TargetedEvent<this, ILayoutNodeActivateEventDetail>;
-    readonly arcgisLayoutNodeFocus: TargetedEvent<this, boolean>;
-}
+export abstract class ArcgisNavCard extends LitElement {
+  /**
+   * Localization strings
+   *
+   * @internal
+   */
+  protected _messages: Partial<{}> & T9nMeta<{}>;
+  /**
+   * The layout node that is currently activated for editing. This is
+   * tracked in order to show the node's configuration
+   * controls and "active" state in the UI.
+   */
+  accessor activatedNode: ILayoutNode | undefined;
+  /**
+   * Enables debug mode
+   *
+   * @default false
+   */
+  accessor debug: boolean;
+  /**
+   * Whether the parent layout is in edit mode
+   *
+   * @default false
+   */
+  accessor isEditMode: boolean;
+  accessor node: ILayoutNode;
+  /** The sections to render within the nav card */
+  accessor sections: ISection[];
+  /**
+   * Customer provided translations to override the
+   * default strings.
+   */
+  accessor translations: ITranslationMap;
+  /**
+   * 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.
+   */
+  accessor utils: LayoutUtils | undefined;
+  readonly arcgisLayoutActivateNode: import("@arcgis/lumina").TargetedEvent<this, ILayoutNodeActivateEventDetail>;
+  readonly arcgisLayoutNodeFocus: import("@arcgis/lumina").TargetedEvent<this, boolean>;
+  readonly "@eventTypes": {
+    arcgisLayoutActivateNode: ArcgisNavCard["arcgisLayoutActivateNode"]["detail"];
+    arcgisLayoutNodeFocus: ArcgisNavCard["arcgisLayoutNodeFocus"]["detail"];
+  };
+}

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

@@ -1,15 +1,12 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as u } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-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 { css as v, html as o } from "lit";
+import { LitElement as b, createEvent as r, noShadowRoot as f, nothing as d, safeClassMap as n, safeStyleMap as m } from "@arcgis/lumina";
 import { u as g } from "../../chunks/useT9n.js";
 import { getProp as h } from "@esri/hub-common";
 import { i as p } from "../../chunks/isNodeVisible.js";
 import { b as $ } from "../../chunks/getResponsiveClasses.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.2 */
-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-color-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px}arcgis-nav-card[is-edit-mode] calcite-tab-nav.activated{--calcite-internal-color-focus: var(--calcite-color-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}}`;
+const _ = v`@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-color-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px}arcgis-nav-card[is-edit-mode] calcite-tab-nav.activated{--calcite-internal-color-focus: var(--calcite-color-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}}`;
 function N(a, t, i, e) {
   {
     let s = a;
@@ -23,7 +20,7 @@ function N(a, t, i, e) {
     return s;
   }
 }
-class y extends v {
+class y extends b {
   constructor() {
     super(...arguments), this._messages = g(), this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1, this.arcgisLayoutActivateNode = r(), this.arcgisLayoutNodeFocus = r();
   }
@@ -31,7 +28,7 @@ class y extends v {
     this.properties = { node: 0, sections: 0, translations: 0, isEditMode: 7, activatedNode: 0, utils: 0, debug: 5 };
   }
   static {
-    this.shadowRootOptions = b;
+    this.shadowRootOptions = f;
   }
   static {
     this.styles = _;
@@ -61,7 +58,7 @@ class y extends v {
   }
   renderTabs() {
     let 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;
+    return this._hasSections && (t = o`<calcite-tabs scale=l><calcite-tab-nav class=${n({ activated: this.node.id === this.activatedNode?.id })} data-node-id=${this.node.id ?? d} @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) ?? d}>${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=${n(this._getSectionClasses(i).join(" "))} .activatedNode=${this.activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${i} style=${m(i.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), t;
   }
   render() {
     return this.renderTabs();

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

@@ -1,6 +1 @@
-import "@esri/calcite-components/components/calcite-tabs";
-import "@esri/calcite-components/components/calcite-tab-nav";
-import "@esri/calcite-components/components/calcite-tab-title";
-import "@esri/calcite-components/components/calcite-tab";
-import "../arcgis-layout-section/index.js";
 export * from "./customElement.js";

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

@@ -1,18 +1,17 @@
-/// <reference types="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { IConfigurableLayoutNode } from '@esri/hub-common';
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
  * A text card that can be added to an ILayout or leveraged
  * independently. The text content is sanitized before rendering
  * to prevent XSS attacks.
  */
-export declare class ArcgisTextCard extends LitElement {
-    /**
-     * The HTML content to display - this will be
-     * sanitized before rendering.
-     *
-     * @default ""
-     */
-    html: string;
-}
+export abstract class ArcgisTextCard extends LitElement {
+  /**
+   * The HTML content to display - this will be
+   * sanitized before rendering.
+   *
+   * @default ""
+   */
+  accessor html: string;
+}

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

@@ -1,13 +1,10 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { LitElement as s } from "@arcgis/lumina";
-import { css as r } from "@lit/reactive-element/css-tag.js";
+import { css as i, html as s } from "lit";
+import { LitElement as r } from "@arcgis/lumina";
 import { sanitizeHtml as h } from "@esri/hub-components";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.2 */
-const o = r`:host{display:block}: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 e extends s {
+const o = i`:host{display:block}: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 e extends r {
   constructor() {
     super(...arguments), this.html = "";
   }
@@ -21,7 +18,7 @@ class e extends s {
     return h(this.html);
   }
   render() {
-    return i`<div .innerHTML=${this._content ?? ""}></div>`;
+    return s`<div .innerHTML=${this._content ?? ""}></div>`;
   }
 }
 t("arcgis-text-card", e);

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

@@ -1,11 +1,9 @@
-import { html as e } from "lit-html";
-import { keyed as m } from "lit-html/directives/keyed.js";
+/* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
+import { html as e } from "lit";
+import { keyed as m } from "lit/directives/keyed.js";
 import { safeStyleMap as r, deferLoad as g } from "@arcgis/lumina";
 import { spread as $, spreadProps as s } from "@open-wc/lit-helpers";
 import { getProp as h } from "@esri/hub-common";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.36/esri/copyright.txt for details.
-v0.36.2 */
 function M({ tagName: d, props: u, classes: y, styles: t, children: b, options: o }) {
   const n = h(u, "node.id"), i = {
     ...u,

package/dist/components/layouts/utils/layout-event-types.d.ts

@@ -1,13 +1,5 @@
-import { HTMLConfigurableLayoutNodeElement, ILayoutNode, ILayoutNodeConfig, LayoutNode } from '@esri/hub-common';
+import type { LayoutNode } from "@esri/hub-common";
+
 export interface ILayoutNodeActivateEventDetail {
-    node: LayoutNode;
-}
-export interface ILayoutNodeAddEventDetail {
-    adjacentNode: ILayoutNode;
-    position: "after" | "before";
-    config: ILayoutNodeConfig;
-}
-export interface ILayoutNodeEditEventDetail {
-    node: LayoutNode;
-    element: HTMLConfigurableLayoutNodeElement;
-}
+  node: LayoutNode;
+}