@arcgis/common-components 4.29.0-beta.9 → 5.0.0-next.113

package/dist/components/arcgis-label-input/customElement.js

@@ -0,0 +1,113 @@
+import { c as l } from "../../chunks/runtime.js";
+import { formatNumber as r } from "@arcgis/core/intl.js";
+import { LitElement as o, createEvent as u } from "@arcgis/lumina";
+import { createRef as n, ref as a } from "lit/directives/ref.js";
+import { css as h, html as s } from "lit";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const c = h`:host{display:block}:host([hidden]){display:none}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.readOnlyLabel{text-align:start}}:host([alignment="end"]){.readOnlyLabel{text-align:end}}:host([alignment="center"]){.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
+class d extends o {
+  constructor() {
+    super(...arguments), this._buttonRef = n(), this._inputRef = n(), this._labelRef = n(), this._formatOptions = {
+      style: "decimal",
+      useGrouping: !0,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }, this._formatValue = (t) => r(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = u({ cancelable: !1 });
+  }
+  static {
+    this.properties = { _displayedValue: 16, _editing: 16, alignment: 3, editing: 39, labelFormatter: 0, readOnly: 7, value: 11 };
+  }
+  static {
+    this.styles = c;
+  }
+  static {
+    this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
+  }
+  get editing() {
+    return this._editing;
+  }
+  async edit() {
+    this._enterEdit();
+  }
+  getLabelBoundingClientRect() {
+    return this._labelRef.value ? this._labelRef.value.getBoundingClientRect() : this.el.getBoundingClientRect();
+  }
+  willUpdate(t) {
+    if (t.has("value") || t.has("labelFormatter")) {
+      const e = this.value;
+      this._displayedValue = this._internalLabelFormatter(e);
+    }
+  }
+  updated(t) {
+    const e = this._inputRef.value, i = this.renderRoot.querySelector(".readOnlyLabel");
+    e && i && (e.style.width = `${i.offsetWidth}px`);
+  }
+  _enterEdit() {
+    this._editing || this.readOnly || (this._editing = !0, this.requestUpdate("editing", !1), this.updateComplete.then(async () => {
+      const t = this._inputRef.value;
+      await t?.setFocus(), await t?.selectText();
+    }));
+  }
+  _exitEdit(t, e = !1) {
+    this._editing && (t ? this._commitValue(this._inputRef.value) : this._inputRef.value && (this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
+      await this._buttonRef.value?.setFocus();
+    }));
+  }
+  _commitValue(t) {
+    const e = this._parseNumber(t?.value ?? "");
+    e !== null && this.value !== e && (this.value = e, this.arcgisChange.emit());
+  }
+  _parseNumber(t) {
+    if (t.trim() === "")
+      return null;
+    const e = Number(t);
+    return Number.isFinite(e) ? e : this.value ?? null;
+  }
+  _internalLabelFormatter(t) {
+    const e = this.labelFormatter;
+    if (!e)
+      return this._formatValue(t);
+    const i = e(t, this._formatValue);
+    return i ?? this._formatValue(t);
+  }
+  _onBlur() {
+    this._exitEdit(!0, !0);
+  }
+  _onValueChange(t) {
+    this._commitValue(t.currentTarget);
+  }
+  _onKeyDown(t) {
+    t.key === "Enter" ? (this._exitEdit(!0), t.stopPropagation(), t.preventDefault()) : t.key === "Escape" && (this._exitEdit(!1), t.stopPropagation(), t.preventDefault());
+  }
+  _onPointerDown(t) {
+    this._pointerDownPosition = { x: t.clientX, y: t.clientY };
+  }
+  _onClick(t) {
+    if (this._pointerDownPosition) {
+      const e = t.clientX - this._pointerDownPosition.x, i = t.clientY - this._pointerDownPosition.y;
+      if (Math.sqrt(e * e + i * i) > 2)
+        return;
+    }
+    this._enterEdit(), this._pointerDownPosition = null;
+  }
+  _onInput(t) {
+    const e = this._parseNumber(t.currentTarget.value ?? "");
+    if (e === null) {
+      this._displayedValue = "";
+      return;
+    }
+    this._displayedValue = this._internalLabelFormatter(e);
+  }
+  render() {
+    const { alignment: t, _displayedValue: e } = this, i = [
+      s`<span class="readOnlyLabel"><span ${a(this._labelRef)}>${e}</span></span>`
+    ];
+    return this.readOnly || i.push(s`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${a(this._buttonRef)}>${e}</calcite-button>`, s`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${a(this._inputRef)}></calcite-input-number>`), i;
+  }
+}
+l("arcgis-label-input", d);
+export {
+  d as ArcgisLabelInput
+};

package/dist/components/arcgis-label-input/index.d.ts

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-input-number";
+export * from "./customElement.js";

package/dist/components/arcgis-label-input/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-input-number";
+export * from "./customElement.js";

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

@@ -0,0 +1,43 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { IPopoverProps } from '../../utils/types';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-picker-input/) */
+export declare class ArcgisPickerInput extends LitElement {
+    /**
+     * If true, disables the component.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /** Heading for the component. */
+    heading?: string;
+    /**
+     * Icon to display at the end of the component.
+     *
+     * @default "pencil"
+     */
+    iconEnd: HTMLCalciteIconElement["icon"];
+    /** Text to display within the "Done" button. */
+    intlDone?: string;
+    /**
+     * Label for the component
+     *
+     * @default ""
+     */
+    label: string;
+    /** Convenience prop to specify common popover props. */
+    popoverProps?: IPopoverProps;
+    /** Close the component. */
+    close(): Promise<void>;
+    /** Set focus on the component. */
+    setFocus(): Promise<void>;
+    /** Emitted when the component has been opened. */
+    readonly arcgisPopoverOpen: TargetedEvent<this, void>;
+    /** Emitted when the component has been closed. */
+    readonly arcgisPopoverClose: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisPopoverClose": ArcgisPickerInput["arcgisPopoverClose"]["detail"];
+        "arcgisPopoverOpen": ArcgisPickerInput["arcgisPopoverOpen"]["detail"];
+    };
+}

package/dist/components/arcgis-picker-input/customElement.js

@@ -0,0 +1,59 @@
+import { c as s } from "../../chunks/runtime.js";
+import { css as n, html as o } from "lit";
+import { LitElement as l, createEvent as i, safeStyleMap as a } from "@arcgis/lumina";
+import { createRef as r, ref as t } from "lit/directives/ref.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const c = n`:host{display:flex}:host([disabled]){opacity:.25;pointer-events:none}button{overflow:hidden;background-color:transparent;align-items:center;border:none;border-radius:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;gap:var(--calcite-space-sm);height:100%;justify-content:center;outline-color:transparent;outline-offset:0;padding:3px 0;padding-inline:3px var(--calcite-space-sm);position:relative;text-decoration:none;user-select:none;text-align:center;-webkit-appearance:none;width:100%;&:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}&:hover{text-decoration:none}}.preview{border:var(--calcite-border-width-sm) solid #949494;display:flex;align-items:center;flex-grow:1}.container{display:flex;gap:5px;width:100%}::slotted([slot="preview"]){flex-grow:1;display:flex}calcite-icon{color:var(--calcite-color-text-3)}`;
+class p extends l {
+  constructor() {
+    super(), this.panelEl = r(), this.open = !1, this.disabled = !1, this.iconEnd = "pencil", this.label = "", this.arcgisPopoverOpen = i(), this.arcgisPopoverClose = i(), this.listenOn(document.body, "arcgisPopoverOpen", this.onPopoverOpen);
+  }
+  static {
+    this.properties = { open: 16, disabled: 7, heading: 1, iconEnd: 0, intlDone: 1, label: 1, popoverProps: 0 };
+  }
+  static {
+    this.styles = c;
+  }
+  async close() {
+    this.onPopoverClose();
+  }
+  async setFocus() {
+    this.buttonEl?.focus();
+  }
+  setPreviewContainerRef(e) {
+    this.previewContainerEl = e;
+  }
+  setButtonRef(e) {
+    this.buttonEl = e;
+  }
+  handlePopoverOpen(e) {
+    this.panelEl.value.closed = !1, this.arcgisPopoverOpen.emit(), e.stopPropagation();
+  }
+  handlePopoverKeyUp({ key: e }) {
+    e === "Escape" && this.onPopoverClose();
+  }
+  onPopoverOpen(e) {
+    this.open && (e.composedPath().includes(this.el) || (this.open = !1));
+  }
+  onPopoverClose() {
+    this.open = !1, this.arcgisPopoverClose.emit(), setTimeout(() => this.buttonEl?.focus(), 300);
+  }
+  handlePanelClose(e) {
+    e.stopPropagation(), this.onPopoverClose();
+  }
+  handleButtonClick() {
+    this.open = !this.open, this.open && setTimeout(() => {
+      this.panelEl.value?.setFocus();
+    }, 300);
+  }
+  render() {
+    const { popoverProps: e } = this;
+    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${a(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${this.onPopoverClose}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
+  }
+}
+s("arcgis-picker-input", p);
+export {
+  p as ArcgisPickerInput
+};

package/dist/components/arcgis-picker-input/index.d.ts

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-picker-input/index.js

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-ramp-color/customElement.d.ts

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import { default as Color } from '@arcgis/core/Color.js';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { PropertyValues } from 'lit';
+
+export interface ColorStop {
+    color: Color | string;
+    value: number;
+    size?: number;
+}
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-ramp-color/) */
+export declare class ArcgisRampColor extends LitElement {
+    /** @default "horizontal" */
+    layout: "horizontal" | "vertical";
+    /** @default 0 */
+    min: number;
+    /** @default 1 */
+    max: number;
+    stops: ColorStop[];
+}

package/dist/components/arcgis-ramp-color/customElement.js

@@ -0,0 +1,84 @@
+import { c as f } from "../../chunks/runtime.js";
+import w from "@arcgis/core/Color.js";
+import { LitElement as x, nothing as u, safeClassMap as C } from "@arcgis/lumina";
+import { css as v, svg as p, html as b } from "lit";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const S = v`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}.hidden{display:none!important}svg{stroke-width:var(--calcite-border-width-sm);stroke:var(--calcite-color-border-input);margin:0;display:block;block-size:100%;inline-size:100%;padding:0}svg .background{fill:#e0e0e0}`;
+class I {
+  constructor(t, i, n, e) {
+    this.color = t, this.ratio = i, this.opacity = n, this.sizeRatio = e;
+  }
+}
+const M = new w([0, 0, 0, 0.5]);
+class D extends x {
+  constructor() {
+    super(...arguments), this._minSizeRatio = 0.2, this._rampStops = [], this._containerDimensions = [0, 0], this.layout = "horizontal", this.min = 0, this.max = 1, this.stops = [];
+  }
+  static {
+    this.properties = { _containerDimensions: 16, layout: 3, min: 9, max: 9, stops: 0 };
+  }
+  static {
+    this.styles = S;
+  }
+  willUpdate(t) {
+    if (super.willUpdate(t), t.has("min") || t.has("max") || t.has("stops")) {
+      const { stops: i, min: n, max: e } = this, a = e - n, s = i.map((l) => l.size ?? 0), r = Math.min(...s), c = Math.max(...s) - r, o = i.map((l) => {
+        const { color: h, value: g, size: y } = l, $ = h instanceof w ? h : w.fromString(h) ?? M, z = (g - n) / a;
+        return new I($.toCss(), z, $.a, y ? (y - r) / c : void 0);
+      });
+      if (o[0].ratio !== 0) {
+        const { color: l, opacity: h, sizeRatio: g } = o[0];
+        o.unshift(new I(l, 0, h, g));
+      }
+      if (o[o.length - 1].ratio !== 0) {
+        const { color: l, opacity: h, sizeRatio: g } = o[o.length - 1];
+        o.push(new I(l, 1, h, g));
+      }
+      this._rampStops = o;
+    }
+  }
+  loaded() {
+    const t = new ResizeObserver((e) => {
+      for (const a of e) {
+        const { width: s, height: r } = a.contentRect;
+        this._containerDimensions = [s, r];
+      }
+    }), { width: i, height: n } = this.el.getBoundingClientRect();
+    this._containerDimensions = [i, n], t.observe(this.el);
+  }
+  render() {
+    const t = this._rampStops, [i, n] = this._containerDimensions, e = this.layout === "horizontal", a = "rampFillId", s = "rampBackgroundFillId", r = R(t), m = [];
+    if (i > 0 && n > 0)
+      if (r) {
+        const c = k(this.layout, i, n, t, this._minSizeRatio);
+        m.push(p`<path fill=${`url(#${s})`} d=${c ?? u} />`, p`<path fill=${`url(#${a})`} d=${c ?? u} />`);
+      } else
+        m.push(p`<rect fill=${`url(#${s})`} height=100% width=100% x=0 y=0 />`, p`<rect fill=${`url(#${a})`} height=100% width=100% x=0 y=0 />`);
+    return b`<svg xmlns=http://www.w3.org/2000/svg>${p`<defs><linearGradient id=${a} x1=0 x2=${e ? 1 : 0} y1=${e ? 0 : 1} y2=0>${t.map(({ ratio: c, color: o, opacity: l }) => p`<stop offset=${`${(c * 100).toFixed(2)}%`} stop-color=${o ?? u} stop-opacity=${l ?? u} />`)}</linearGradient><pattern height=15 id=${s} patternUnits=userSpaceOnUse width=15 x=0 y=0><image height=15 href=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNjY2MiIC8+PHBhdGggZD0iTTAgMCBMOCAwIEw4IDggTDAgOCBaIiBmaWxsPSIjZmZmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDgpIiAvPjxwYXRoIGQ9Ik0wIDAgTDggMCBMOCA4IEwwIDggWiIgZmlsbD0iI2NjYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCw4KSIgLz48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsMCkiIC8+PC9zdmc+ width=15 x=0 y=0 /></pattern></defs><rect class=${C({ background: !0 })} height=100% width=100% x=0 y=0 />${m}`}</svg>`;
+  }
+}
+function R(d) {
+  return d.every((t) => t.sizeRatio !== void 0);
+}
+function k(d, t, i, n, e) {
+  const a = (s) => (1 - e) * s + e;
+  if (d === "horizontal") {
+    const s = n.map(({ ratio: r, sizeRatio: m }) => {
+      const c = r * t, o = i - a(m) * i;
+      return `L ${c} ${o}`;
+    });
+    return `M 0 ${i} ${s.join(" ")} L ${t} ${i} Z`;
+  } else {
+    const s = n.map(({ ratio: r, sizeRatio: m }) => {
+      const c = i - r * i;
+      return `L ${a(m) * t} ${c}`;
+    });
+    return `M 0 ${i} ${s.join(" ")} L 0 0 Z`;
+  }
+}
+f("arcgis-ramp-color", D);
+export {
+  D as ArcgisRampColor
+};

package/dist/components/arcgis-ramp-color/index.d.ts

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

package/dist/components/arcgis-ramp-color/index.js

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

package/dist/components/arcgis-ramp-color-break/customElement.d.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../index.d.ts" />
+import { default as Color } from '@arcgis/core/Color.js';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { PropertyValues } from 'lit';
+import { ArcgisRampColor } from '../arcgis-ramp-color/customElement.js';
+
+export interface ColorBreak {
+    color: Color | string;
+    max: number;
+    min: number;
+}
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-ramp-color-break/) */
+export declare class ArcgisRampColorBreak extends LitElement {
+    /** @default "horizontal" */
+    layout: ArcgisRampColor["layout"];
+    /** @default 0 */
+    min: number;
+    /** @default 1 */
+    max: number;
+    stops: ColorBreak[];
+}

package/dist/components/arcgis-ramp-color-break/customElement.js

@@ -0,0 +1,40 @@
+import { c as l } from "../../chunks/runtime.js";
+import { LitElement as m } from "@arcgis/lumina";
+import { css as p, html as c } from "lit";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const n = p`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}arcgis-ramp-color{block-size:inherit;inline-size:inherit}`;
+class h extends m {
+  constructor() {
+    super(...arguments), this._rampStops = [], this.layout = "horizontal", this.min = 0, this.max = 1, this.stops = [];
+  }
+  static {
+    this.properties = { layout: 1, min: 9, max: 9, stops: 0 };
+  }
+  static {
+    this.styles = n;
+  }
+  willUpdate(s) {
+    if (super.willUpdate(s), s.has("stops")) {
+      const { stops: o } = this, t = [];
+      o.forEach((r) => {
+        const { color: i, max: a, min: e } = r;
+        t.push({
+          value: e,
+          color: i
+        }, {
+          value: a,
+          color: i
+        });
+      }), this._rampStops = t;
+    }
+  }
+  render() {
+    return c`<arcgis-ramp-color .layout=${this.layout} .min=${this.min} .max=${this.max} .stops=${this._rampStops}></arcgis-ramp-color>`;
+  }
+}
+l("arcgis-ramp-color-break", h);
+export {
+  h as ArcgisRampColorBreak
+};

package/dist/components/arcgis-ramp-color-break/index.d.ts

@@ -0,0 +1,2 @@
+import "../arcgis-ramp-color/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-ramp-color-break/index.js

@@ -0,0 +1,2 @@
+import "../arcgis-ramp-color/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-ramp-opacity/customElement.d.ts

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import { default as Color } from '@arcgis/core/Color.js';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { PropertyValues } from 'lit';
+import { ArcgisRampColor } from '../arcgis-ramp-color/customElement.js';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-ramp-opacity/) */
+export declare class ArcgisRampOpacity extends LitElement {
+    fillColor: Color | string;
+    /** @default "horizontal" */
+    layout: ArcgisRampColor["layout"];
+    /** @default 0 */
+    min: number;
+    /** @default 1 */
+    max: number;
+    stops: {
+        value: number;
+        opacity: number;
+    }[];
+}

package/dist/components/arcgis-ramp-opacity/customElement.js

@@ -0,0 +1,35 @@
+import { c } from "../../chunks/runtime.js";
+import t from "@arcgis/core/Color.js";
+import { LitElement as e } from "@arcgis/lumina";
+import { css as m, html as n } from "lit";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const p = m`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}arcgis-ramp-color{block-size:inherit;inline-size:inherit}`, l = new t([0, 121, 193]);
+class h extends e {
+  constructor() {
+    super(...arguments), this._rampStops = [], this.fillColor = l.clone(), this.layout = "horizontal", this.min = 0, this.max = 1, this.stops = [];
+  }
+  static {
+    this.properties = { fillColor: 1, layout: 1, min: 9, max: 9, stops: 0 };
+  }
+  static {
+    this.styles = p;
+  }
+  willUpdate(o) {
+    if (super.willUpdate(o), o.has("fillColor") || o.has("stops")) {
+      const { stops: a, fillColor: s } = this, i = (s instanceof t ? s : t.fromString(s) ?? l).toRgb();
+      this._rampStops = a.map((r) => ({
+        color: new t(i && [...i, r.opacity]),
+        value: r.value
+      }));
+    }
+  }
+  render() {
+    return n`<arcgis-ramp-color .layout=${this.layout} .stops=${this._rampStops} .min=${this.min} .max=${this.max}></arcgis-ramp-color>`;
+  }
+}
+c("arcgis-ramp-opacity", h);
+export {
+  h as ArcgisRampOpacity
+};

package/dist/components/arcgis-ramp-opacity/index.d.ts

@@ -0,0 +1,2 @@
+import "../arcgis-ramp-color/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-ramp-opacity/index.js

@@ -0,0 +1,2 @@
+import "../arcgis-ramp-color/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-slider/SliderData.d.ts

@@ -0,0 +1,37 @@
+import { default as Accessor } from '@arcgis/core/core/Accessor.js';
+import { UUID } from '@arcgis/toolkit/string';
+type ConstructProperties = Partial<Pick<SliderData, "max" | "min" | "precision" | "values">>;
+export declare class SliderData extends Accessor {
+    constructor(properties?: ConstructProperties);
+    startup(): void;
+    private _entries;
+    get entries(): ReadonlyMap<UUID, number>;
+    /**
+     * The maximum possible data/thumb value of the slider.
+     */
+    set max(value: number);
+    /**
+     * The minimum possible data/thumb value of the slider.
+     */
+    set min(value: number);
+    /**
+     * The number of decimal places to which the slider values are rounded.
+     * The default value is `4`.
+     */
+    precision: number;
+    /** When `ready`, constraints apply to values when set. */
+    readonly ready: boolean;
+    set values(values: number[]);
+    getValue(entry: UUID): number | undefined;
+    /**
+     * Updates a thumb [value](#values) based on the provided index. The provided value
+     * must differ from the previous value.
+     * The provided value must also be between the [min](#min) and [max](#max).
+     *
+     * @returns `true` if the value was changed, otherwise `false`.
+     */
+    setValue(entry: UUID, value: number): boolean;
+    setValues(entries: ReadonlyMap<UUID, number>): boolean;
+    private _updatesValues;
+}
+export {};