@arcgis/common-components 5.2.0-next.64 → 5.2.0-next.66

package/dist/components/arcgis-toolbar-item/customElement.d.ts

@@ -0,0 +1,83 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement, JsxNode } from "@arcgis/lumina";
+import type { Icon } from "@esri/calcite-components/components/calcite-icon";
+import type { MeasurementContext, RenderContext } from "../arcgis-toolbar/types.js";
+import type { Action as Action } from "@esri/calcite-components/components/calcite-action";
+import type { DropdownItem as DropdownItem } from "@esri/calcite-components/components/calcite-dropdown-item";
+
+/**
+ * A configuration for an `arcgis-toolbar` action.
+ *
+ * This is a non-rendering element; it will have no effect unless used
+ * correctly within an `arcgis-toolbar-group`.
+ *
+ * Notes:
+ *
+ * - there is no `scale` for this element; rendered scale is controlled
+ *   exclusively by the host `arcgis-toolbar`
+ *
+ * @internal
+ */
+export abstract class ArcgisToolbarItem extends LitElement {
+  get actionElement(): Action | undefined;
+  /**
+   * Whether or not this action is shown in an 'active'/selected state.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /**
+   * Determines if the action should be rendered in a disabled state.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * The icon to show in the rendered action. For best user experience, this should not be ommitted.
+   *
+   * @default "question-mark"
+   */
+  accessor icon: Icon["icon"];
+  /**
+   * Determines if icon is flipped in RTL direction
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /**
+   * Text to show in the primary label field; do not depend on this ever being visible to the user.
+   *
+   * @default ""
+   */
+  accessor labelText: string;
+  /** @internal */
+  accessor lastActivated: Date | undefined;
+  /**
+   * Determines if action renders a loading spinner if possible
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * Text to show in the tooltip for the action.
+   *
+   * @default ""
+   */
+  accessor tooltipText: string;
+  /**
+   * @param parameter0
+   * @internal
+   */
+  measure(parameter0: MeasurementContext): number[];
+  /**
+   * @param context
+   * @param mode
+   * @param selected
+   * @internal
+   */
+  proxiedRender(context: RenderContext, mode: "collapsed-action" | "dropdown-item" | "expanded-action", selected?: boolean): JsxNode;
+  readonly arcgisItemSelected: import("@arcgis/lumina").TargetedEvent<this, { element: Action | DropdownItem | undefined; }>;
+  readonly "@eventTypes": {
+    arcgisItemSelected: ArcgisToolbarItem["arcgisItemSelected"]["detail"];
+  };
+}

package/dist/components/arcgis-toolbar-item/customElement.js

@@ -0,0 +1,42 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import { html as n } from "lit";
+import { ref as f } from "lit/directives/ref.js";
+import { LitElement as $, createEvent as g, nothing as c, safeClassMap as v } from "@arcgis/lumina";
+import { W as s } from "../../chunks/utils.js";
+import { E as b } from "../../chunks/element-reference-controller.js";
+import { g as u } from "../../chunks/utils2.js";
+class x extends $ {
+  constructor() {
+    super(...arguments), this._active = !1, this._elementReferenceController = new b(this), this.icon = "question-mark", this.tooltipText = "", this.labelText = "", this.disabled = !1, this.loading = !1, this.iconFlipRtl = !1, this.arcgisItemSelected = g();
+  }
+  static {
+    this.properties = { icon: 3, lastActivated: 0, active: 7, tooltipText: 1, labelText: 3, disabled: 7, loading: 7, iconFlipRtl: 7, actionElement: 32 };
+  }
+  get active() {
+    return this._active;
+  }
+  set active(t) {
+    t !== this._active && (this._active = t, t && (this.lastActivated = /* @__PURE__ */ new Date()));
+  }
+  get actionElement() {
+    return this._elementReferenceController.element;
+  }
+  measure({ scale: t }) {
+    return [s.action[t] + s.actionPadding[t]];
+  }
+  proxiedRender(t, i, r) {
+    const l = t.tooltipAppearance, a = this._elementReferenceController.element, m = l !== "native" && i === "collapsed-action", d = l === "calcite-dark" ? "calcite-mode-dark" : void 0, h = u(t), e = this.tooltipText || this.labelText;
+    return i === "dropdown-item" ? n`<calcite-dropdown-item .disabled=${this.disabled} icon-start=${this.icon ?? c} .iconFlipRtl=${this.iconFlipRtl ? "both" : void 0} .label=${e} @click=${(o) => this._handleDropdownItemClick(o)} .selected=${this.active || r} title=${e ?? c}>${this.labelText}</calcite-dropdown-item>` : n`<calcite-action .active=${this.active} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .label=${e} .loading=${this.loading} @click=${(o) => this._handleActionClick(o)} .scale=${t.scale} .text=${this.labelText} .textEnabled=${i === "expanded-action"} title=${(l === "native" ? e : void 0) ?? c} ${f(this._elementReferenceController.ref)}></calcite-action>${m && a ? n`<calcite-tooltip class=${v(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${e}</span></calcite-tooltip>` : void 0}`;
+  }
+  _handleActionClick(t) {
+    this.isConnected && this.arcgisItemSelected?.emit({ element: t.currentTarget });
+  }
+  _handleDropdownItemClick(t) {
+    this.isConnected && this.arcgisItemSelected?.emit({ element: t.currentTarget });
+  }
+}
+p("arcgis-toolbar-item", x);
+export {
+  x as ArcgisToolbarItem
+};

package/dist/components/arcgis-toolbar-item/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-item/index.js

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-dropdown-item";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-tooltip";
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-more-button/customElement.d.ts

@@ -0,0 +1,52 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement, JsxNode } from "@arcgis/lumina";
+import type { MeasurementContext, RenderContext } from "../arcgis-toolbar/types.js";
+
+/**
+ * Configuration for a series of items that will be collapsed behind a 'more' overflow button
+ * depending on available space. This will render either all of the items in a flat list,
+ * or with an action that exposes an overflow list.
+ *
+ * This element does not apply any styling; unless there is overflow, it should not
+ * be visually evident at all.
+ *
+ * This element is only compatible with `arcgis-toolbar-item` elements,
+ * because it needs elements with consistent size and properties to support dynamic
+ * sizing and rendering behavior.
+ *
+ * @internal
+ */
+export abstract class ArcgisToolbarMoreButton extends LitElement {
+  /**
+   * Controls the appearance of the menu
+   *
+   * @default "action-menu"
+   */
+  accessor menuAppearance: "action-menu" | "dropdown";
+  /**
+   * Label used for the overflow action trigger and its tooltip.
+   *
+   * @default "More actions"
+   */
+  accessor overflowActionLabel: string;
+  /**
+   * Controls layout priority, which determines space allocation and layout behavior.
+   * Setting this to ForceCollapse will result in a split-button appearance even with
+   * ample space for all managed items. Setting to NeverCollapse will reserve space for
+   * all items (no visible split button) even if that would require scrolling.
+   *
+   * @default 100
+   */
+  accessor priority: number;
+  /**
+   * @param context
+   * @internal
+   */
+  measure(context: MeasurementContext): number[];
+  /**
+   * @param context
+   * @param budget
+   * @internal
+   */
+  proxiedRender(context: RenderContext, budget: number): JsxNode;
+}

package/dist/components/arcgis-toolbar-more-button/customElement.js

@@ -0,0 +1,68 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as A } from "../../chunks/runtime.js";
+import { ref as f } from "lit/directives/ref.js";
+import { html as m } from "lit";
+import { LitElement as C, nothing as v, safeClassMap as $ } from "@arcgis/lumina";
+import { L as u } from "../../chunks/utils.js";
+import { E as w } from "../../chunks/element-reference-controller.js";
+import { a as g, u as _, g as y } from "../../chunks/utils2.js";
+import { b as L } from "../../chunks/utils3.js";
+class R extends C {
+  constructor() {
+    super(...arguments), this._elementReferenceController = new w(this), this._childrenObserver = new MutationObserver(() => {
+      this._syncChildren();
+    }), this.priority = u.Medium, this.menuAppearance = "action-menu", this.overflowActionLabel = "More actions";
+  }
+  static {
+    this.properties = { _children: 16, priority: 9, menuAppearance: 1, overflowActionLabel: 1 };
+  }
+  measure(e) {
+    const t = this._children?.length ?? 0;
+    if (!t)
+      return [0];
+    const i = g(e), l = t * i;
+    if (!(this.priority < u.NeverCollapse && t > 2))
+      return [l];
+    const s = Math.min(t, 2) * i, o = [s];
+    if (t <= 2 || this.priority <= u.ForceCollapse)
+      return o;
+    for (let n = 1; n < t - 1; n++)
+      o.push(s + i * n);
+    return _(o);
+  }
+  proxiedRender(e, t) {
+    const i = this._children;
+    if (!i)
+      return;
+    const { visible: l, hidden: r } = this._resolveActionsFromBudget(i, e, t), s = "hamburger", o = this.overflowActionLabel, n = e.tooltipAppearance, c = n !== "native", a = this._elementReferenceController.element, p = n === "calcite-dark" ? "calcite-mode-dark" : void 0, h = y(e), b = this.menuAppearance === "action-menu" ? m`<calcite-action-menu .label=${o} overlay-positioning=fixed .placement=${h}><calcite-action .icon=${s} .scale=${e.scale} slot=trigger .text=${o} title=${(n === "native" ? o : "") ?? v} ${f(this._elementReferenceController.ref)}></calcite-action>${r.map((d) => d.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : m`<calcite-dropdown overlay-positioning=fixed .placement=${h}><calcite-action .icon=${s} .scale=${e.scale} slot=trigger .text=${o} title=${(n === "native" ? o : "") ?? v} ${f(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown-group selection-mode=none>${r.map((d) => d.proxiedRender(e, "dropdown-item"))}</calcite-dropdown-group></calcite-dropdown>`;
+    return m`${l.map((d) => d.proxiedRender(e, "collapsed-action"))}${r.length ? b : void 0}${r.length && c ? m`<calcite-tooltip class=${$(p)} overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${o}</span></calcite-tooltip>` : void 0}`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._childrenObserver.observe(this.el, { childList: !0 }), this._syncChildren();
+  }
+  disconnectedCallback() {
+    this._childrenObserver.disconnect(), super.disconnectedCallback();
+  }
+  _syncChildren() {
+    this._componentWaitAbortController?.abort();
+    const e = Array.from(this.el.querySelectorAll("arcgis-toolbar-item")), t = new AbortController();
+    this._componentWaitAbortController = t, Promise.all(e.map((i) => i.componentOnReady())).then(() => {
+      !this.isConnected || t.signal.aborted || (this._children = e);
+    });
+  }
+  _resolveActionsFromBudget(e, t, i) {
+    const l = e.find((a) => a.active) ?? e?.toSorted(L)?.at(0), r = Math.floor(i / g(t));
+    if (r >= e.length)
+      return { visible: [...e], hidden: [] };
+    const o = r - 1, n = e.slice(0, o), c = e.slice(o);
+    if (l && c.includes(l)) {
+      const [a] = c.splice(c.indexOf(l), 1), p = n.pop();
+      n.push(a), p && c.unshift(p);
+    }
+    return { visible: n, hidden: c };
+  }
+}
+A("arcgis-toolbar-more-button", R);
+export {
+  R as ArcgisToolbarMoreButton
+};

package/dist/components/arcgis-toolbar-more-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-more-button/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-action-menu";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-dropdown";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-tooltip";
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-split-button/customElement.d.ts

@@ -0,0 +1,51 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement, JsxNode } from "@arcgis/lumina";
+import type { MeasurementContext, RenderContext } from "../arcgis-toolbar/types.js";
+
+/**
+ * Configuration for a split button. Split button will either render all actions
+ * flat, or collapse all actions with a single element shown + a dropdown menu.
+ *
+ * This element styles the rendered actions in the collapsed case to look like
+ * a split button.
+ *
+ * This element is only compatible with `arcgis-toolbar-item` elements,
+ * because it needs elements with consistent size and properties to support dynamic
+ * sizing and rendering behavior.
+ *
+ * @internal
+ */
+export abstract class ArcgisToolbarSplitButton extends LitElement {
+  /**
+   * Controls the appearance of the menu.
+   *
+   * @default "dropdown"
+   */
+  accessor menuAppearance: "action-menu" | "dropdown";
+  /**
+   * Label used for the overflow action trigger and its tooltip.
+   *
+   * @default "More actions"
+   */
+  accessor overflowActionLabel: string;
+  /**
+   * Controls layout priority, which determines space allocation and layout behavior.
+   * Setting this to ForceCollapse will result in a split-button appearance even with
+   * ample space for all managed items. Setting to NeverCollapse will reserve space for
+   * all items (no visible split button) even if that would require scrolling.
+   *
+   * @default 100
+   */
+  accessor priority: number;
+  /**
+   * @param context
+   * @internal
+   */
+  measure(context: MeasurementContext): number[];
+  /**
+   * @param context
+   * @param budget
+   * @internal
+   */
+  proxiedRender(context: RenderContext, budget: number): JsxNode;
+}

package/dist/components/arcgis-toolbar-split-button/customElement.js

@@ -0,0 +1,66 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as y } from "../../chunks/runtime.js";
+import { ref as b } from "lit/directives/ref.js";
+import { html as d } from "lit";
+import { LitElement as _, nothing as h, safeClassMap as a } from "@arcgis/lumina";
+import { E as L } from "../../chunks/element-reference-controller.js";
+import { L as f, W as R } from "../../chunks/utils.js";
+import { a as $, u as E, g as k } from "../../chunks/utils2.js";
+import { b as O } from "../../chunks/utils3.js";
+class S extends _ {
+  constructor() {
+    super(...arguments), this._elementReferenceController = new L(this), this._childrenObserver = new MutationObserver(() => this._syncChildren()), this.priority = f.Medium, this.menuAppearance = "dropdown", this.overflowActionLabel = "More actions";
+  }
+  static {
+    this.properties = { _children: 16, priority: 9, menuAppearance: 1, overflowActionLabel: 1 };
+  }
+  measure(e) {
+    const { priority: n, _children: i } = this, r = i?.length ?? 0;
+    if (!r)
+      return [0];
+    const o = $(e), s = r * o;
+    if (!(n < f.NeverCollapse) || r <= 1)
+      return [s];
+    const l = o + M(e);
+    return n <= f.ForceCollapse ? [l] : E([l, s]);
+  }
+  proxiedRender(e, n) {
+    const i = this._children;
+    if (!i)
+      return;
+    const { visible: r, hidden: o } = this._resolveActionsFromBudget(i, e, n, this.menuAppearance === "dropdown"), s = W(e), t = this.overflowActionLabel, l = e.tooltipAppearance, m = l !== "native", C = this._elementReferenceController.element, A = l === "calcite-dark" ? "calcite-mode-dark" : void 0, g = "split-anchor", v = o.length ? "split-menu" : "", u = k(e), w = this.menuAppearance === "action-menu" ? d`<calcite-action-menu .label=${t} overlay-positioning=fixed .placement=${u} class=${a(v)}><calcite-action .icon=${s} .scale=${e.scale} class=${a(g)} data-layout=${e.layout ?? h} slot=trigger title=${t ?? h} .label=${t} .text=${t} ${b(this._elementReferenceController.ref)}></calcite-action>${o.map((c) => c.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : d`<calcite-dropdown overlay-positioning=fixed .placement=${u} .scale=${e.scale} class=${a(v)}><calcite-action class=${a(g)} data-layout=${e.layout ?? h} .icon=${s} .label=${t} .scale=${e.scale} slot=trigger .text=${l === "native" ? t : ""} title=${t ?? h} ${b(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown-group selection-mode=single>${o.map((c) => c.proxiedRender(e, "dropdown-item", c === r.at(0)))}</calcite-dropdown-group></calcite-dropdown>`;
+    return d`<div class="split-host">${r.map((c) => c.proxiedRender(e, "collapsed-action"))}${o.length ? w : void 0}${o.length && m ? d`<calcite-tooltip class=${a(A)} overlay-positioning=fixed .placement=${u} .referenceElement=${C}><span>${t}</span></calcite-tooltip>` : void 0}</div>`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._childrenObserver.observe(this.el, { childList: !0 }), this._syncChildren();
+  }
+  disconnectedCallback() {
+    this._childrenObserver.disconnect(), super.disconnectedCallback();
+  }
+  _resolveActionsFromBudget(e, n, i, r) {
+    const o = e.find((m) => m.active) ?? e?.toSorted(O)?.at(0);
+    if (Math.floor(i / $(n)) >= e.length)
+      return { visible: [...e], hidden: [] };
+    if (r)
+      return { visible: [o ?? e[0]], hidden: [...e] };
+    const t = [...e];
+    return { visible: t.splice(t.indexOf(o), 1), hidden: t };
+  }
+  _syncChildren() {
+    this._componentWaitAbortController?.abort();
+    const e = Array.from(this.el.querySelectorAll("arcgis-toolbar-item")), n = new AbortController();
+    this._componentWaitAbortController = n, Promise.all(e.map((i) => i.componentOnReady())).then(() => {
+      !this.isConnected || n.signal.aborted || (this._children = e);
+    });
+  }
+}
+function W({ layout: p, relativePosition: e }) {
+  return p === "horizontal" ? e.startsWith("top") ? "chevron-down" : "chevron-up" : e.endsWith("left") ? "chevron-right" : "chevron-left";
+}
+function M({ layout: p, scale: e }) {
+  return R.splitButtonPart[p][e];
+}
+y("arcgis-toolbar-split-button", S);
+export {
+  S as ArcgisToolbarSplitButton
+};

package/dist/components/arcgis-toolbar-split-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-split-button/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-action-menu";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-dropdown";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-tooltip";
+export * from "./customElement.js";