@arcgis/common-components 5.2.0-next.117 → 5.2.0-next.119

package/dist/components/arcgis-ticks/customElement.js

@@ -16,17 +16,17 @@ const l = {
   tickLabelText: "tick-label-text",
   baseline: "baseline"
 }, A = C`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label-text:hover{text-decoration:underline}.tick:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
-class P extends F {
+class D extends F {
   constructor() {
     super(...arguments), this._messages = T({ name: null }), this.#t = (t) => z(this._messages._lang, this._formatOptions).format(t), this._activeTick = null, this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = L({ cancelable: !1 });
+    }, this.autoDestroyDisabled = !1, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = L({ cancelable: !1 });
   }
   static {
-    this.properties = { _activeTick: 16, _formatOptions: 16, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
+    this.properties = { _activeTick: 16, _formatOptions: 16, autoDestroyDisabled: 5, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
       fromAttribute(t) {
         if (t.includes(","))
           return t.split(",").filter((e) => e.trim() !== "").map(parseFloat).filter((e) => Number.isFinite(e));
@@ -41,6 +41,9 @@ class P extends F {
     this.styles = A;
   }
   #t;
+  async destroy() {
+    await this.manager.destroy();
+  }
   updated() {
     const t = this.renderRoot.querySelector(`.${l.labelsContainer}`);
     if (t) {
@@ -82,14 +85,14 @@ class P extends F {
     return h`<div class=${o(l.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: c, showLabels: w, interactive: k } = this, b = [], v = [];
-    for (const [f, d] of B(a, i, e, t, r)) {
+    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: c, showLabels: w, interactive: k } = this, g = [], v = [];
+    for (const [f, d] of P(a, i, e, t, r)) {
       const p = { [n === "horizontal" ? c ? "right" : "left" : c ? "top" : "bottom"]: `${f}%` }, $ = {
         [l.tick]: !0,
         [l.tickMin]: f === 0,
         [l.tickMax]: f === 100
       };
-      if (b.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
+      if (g.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
         const _ = {
           [l.tickLabel]: !0,
           [l.tickLabelFocused]: this._activeTick === String(d)
@@ -97,7 +100,7 @@ class P extends F {
         v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(l.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
       }
     }
-    return [h`<div class=${o(l.labelsContainer)}>${v}</div>`, h`<div class=${o(l.ticksContainer)}>${b}</div>`];
+    return [h`<div class=${o(l.labelsContainer)}>${v}</div>`, h`<div class=${o(l.ticksContainer)}>${g}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: t, layout: e } = this;
@@ -107,12 +110,12 @@ class P extends F {
     })}></div>` || "";
   }
 }
-function* B(s, t, e, i, a) {
+function* P(s, t, e, i, a) {
   switch (s) {
     case "value": {
       const r = Array.isArray(a) ? a : [a];
       for (const n of r) {
-        const c = D(t, e, n, i) * 100;
+        const c = B(t, e, n, i) * 100;
         c >= 0 && c <= 100 && (yield [c, n]);
       }
       break;
@@ -139,26 +142,26 @@ function* B(s, t, e, i, a) {
     }
   }
 }
-function g(s, t, e) {
+function b(s, t, e) {
   return e < s ? s : e > t ? t : e;
 }
 function x(s, t, e) {
   return s + (t - s) * e;
 }
-function D(s, t, e, i = 0) {
+function B(s, t, e, i = 0) {
   let a = (e - s) / (t - s);
-  if (a = g(0, 1, a), Math.abs(i) < 1e-9)
+  if (a = b(0, 1, a), Math.abs(i) < 1e-9)
     return a;
   const r = 1 + Math.expm1(i) * a;
-  return a = Math.log(r) / i, g(0, 1, a);
+  return a = Math.log(r) / i, b(0, 1, a);
 }
 function u(s, t, e, i = 0) {
-  if (e = g(0, 1, e), Math.abs(i) < 1e-9)
+  if (e = b(0, 1, e), Math.abs(i) < 1e-9)
     return x(s, t, e);
   const a = Math.expm1(i * e) / Math.expm1(i);
   return x(s, t, a);
 }
-M("arcgis-ticks", P);
+M("arcgis-ticks", D);
 export {
-  P as ArcgisTicks
+  D as ArcgisTicks
 };

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

@@ -3,7 +3,7 @@ import { c as p } from "../../chunks/runtime.js";
 import { ref as u } from "lit/directives/ref.js";
 import { css as g, html as o } from "lit";
 import { keyed as f } from "lit/directives/keyed.js";
-import { LitElement as b, createEvent as l, nothing as s, safeClassMap as _ } from "@arcgis/lumina";
+import { LitElement as b, createEvent as l, nothing as n, safeClassMap as _ } from "@arcgis/lumina";
 import { W as r } from "../../chunks/utils.js";
 import { g as $ } from "../../chunks/utils2.js";
 const v = g`:host([text-enabled][data-layout="vertical"]){.interaction-container>button{flex-direction:column;>.text-container{writing-mode:vertical-lr}}}`;
@@ -26,12 +26,12 @@ class x extends b {
     return this._element;
   }
   measure({ layout: t, scale: e }) {
-    const a = r.actionPadding[e], i = r.action[e], n = t === "horizontal" ? this._measuredWidth : this._measuredHeight;
-    return [Math.max(i, n) + a];
+    const a = r.actionPadding[e], i = r.action[e], s = t === "horizontal" ? this._measuredWidth : this._measuredHeight;
+    return [Math.max(i, s) + a];
   }
   proxiedRender(t) {
-    const { tooltipAppearance: e, scale: a } = t, i = this.tooltipText || this.labelText, n = this._hydratedElement, c = e !== "native" && !!i && n, d = e === "calcite-dark" ? "calcite-mode-dark" : void 0, h = $(t);
-    return o`${f(this, o`<calcite-action .active=${this.active} data-appearance=${this.appearance ?? s} data-kind=${this.kind ?? s} data-layout=${t.layout ?? s} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .indicator=${this.indicator} .label=${i} .loading=${this.loading} @click=${(m) => this._handleActionClick(m)} .scale=${a} .text=${this.labelText} .textEnabled=${this.textEnabled} title=${(e === "native" ? i : void 0) ?? s} ${u(this.#e)}></calcite-action>`)}${c ? o`<calcite-tooltip class=${_(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${n} .scale=${a}><span>${i}</span></calcite-tooltip>` : void 0}`;
+    const { tooltipAppearance: e, scale: a } = t, i = this.tooltipText || this.labelText, s = this._hydratedElement, c = e !== "native" && !!this.tooltipText && s, d = e === "calcite-dark" ? "calcite-mode-dark" : void 0, h = $(t);
+    return o`${f(this, o`<calcite-action .active=${this.active} data-appearance=${this.appearance ?? n} data-kind=${this.kind ?? n} data-layout=${t.layout ?? n} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .indicator=${this.indicator} .label=${i} .loading=${this.loading} @click=${(m) => this._handleActionClick(m)} .scale=${a} .text=${this.labelText} .textEnabled=${this.textEnabled} title=${(e === "native" ? i : void 0) ?? n} ${u(this.#e)}></calcite-action>`)}${c ? o`<calcite-tooltip class=${_(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${s} .scale=${a}><span>${i}</span></calcite-tooltip>` : void 0}`;
   }
   disconnectedCallback() {
     this.#t?.disconnect(), super.disconnectedCallback();

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

@@ -2,7 +2,7 @@
 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 v, nothing as c, safeClassMap as g } from "@arcgis/lumina";
+import { LitElement as $, createEvent as v, nothing as a, safeClassMap as g } 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";
@@ -25,9 +25,9 @@ class x extends $ {
   measure({ scale: t }) {
     return [s.action[t] + s.actionPadding[t]];
   }
-  proxiedRender(t, i, r) {
-    const l = t.tooltipAppearance, a = this._elementReferenceController.element, d = l !== "native" && i === "collapsed-action", m = 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>${d && a ? n`<calcite-tooltip class=${g(m)} close-on-click overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${e}</span></calcite-tooltip>` : void 0}`;
+  proxiedRender(t, e, r) {
+    const l = t.tooltipAppearance, c = this._elementReferenceController.element, d = l !== "native" && e === "collapsed-action", m = l === "calcite-dark" ? "calcite-mode-dark" : void 0, h = u(t), i = this.tooltipText || this.labelText;
+    return e === "dropdown-item" ? n`<calcite-dropdown-item .disabled=${this.disabled} icon-start=${this.icon ?? a} .iconFlipRtl=${this.iconFlipRtl ? "both" : void 0} .label=${i} @click=${(o) => this._handleDropdownItemClick(o)} .selected=${this.active || r} title=${this.tooltipText ?? a}>${this.labelText}</calcite-dropdown-item>` : n`<calcite-action .active=${this.active} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .label=${i} .loading=${this.loading} @click=${(o) => this._handleActionClick(o)} .scale=${t.scale} .text=${this.labelText} .textEnabled=${e === "expanded-action"} title=${(l === "native" ? i : void 0) ?? a} ${f(this._elementReferenceController.ref)}></calcite-action>${d && c ? n`<calcite-tooltip class=${g(m)} close-on-click overlay-positioning=fixed .placement=${h} .referenceElement=${c}><span>${i}</span></calcite-tooltip>` : void 0}`;
   }
   _handleActionClick(t) {
     this.isConnected && (this.lastActivated = /* @__PURE__ */ new Date(), this.arcgisItemSelected?.emit({ element: t.currentTarget }));

package/dist/components/arcgis-value-picker/customElement.d.ts

@@ -7,11 +7,12 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * The Value Picker component allows users to step or play through an iterable set of data. The component alone acts as a shell, consisting
  * of a play/pause button, a next button, a previous button, and a slot for adding a component to Value Picker. Value Picker is not associated with a
  * [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) nor does it require that the dataset adheres to a specific structure
- * for it to function. The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
+ * for it to function.
+ *
+ * The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
  * [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/), and [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/) components provide the user with a few different options
  * for placing their data into a Value Picker with minimal configuration. Value Picker handles the different shapes of these components automatically by asserting
- * that all slotted components will extend the
- * [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/types/#ArcgisValuePickerSubcomponent)
+ * that all slotted components will extend the [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/types#ArcgisValuePickerSubcomponent)
  * interface, which allows Value picker to send and receive generic sets of instructions that are interpreted by the slotted component.
  *
  * ### Configuring Value Picker

package/dist/components/arcgis-value-picker/types.d.ts

@@ -1,14 +1,13 @@
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
 
 /**
- * @since
- * 5.2
- *
  * The minimum API required for components being slotted into [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/). Value Picker will automatically
  * create an internal reference to the slotted component, so the properties on this interface can be directly referenced without requiring
  * the the Value Picker component to be aware of the slotted component's unique API. For example, if the user presses play and eventually Value Picker
  * determines that `slottedComponent.canNext` is false but [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#loop) is true, Value Picker will call `slottedComponent.reset()`
  * to reset the slotted component's current value to the first index of its dataset. This will allow playback to continue looping seamlessly.
+ *
+ * @since 5.2
  */
 export interface ArcgisValuePickerSubcomponent extends HTMLElement {
   /**
@@ -47,7 +46,6 @@ export interface AnimateEvent {
   first: boolean;
 }
 
-/** Object used to define the label items. */
 export interface LabelItem {
   /** The value of the item. */
   value: string;