@arcgis/map-components/dist/components/arcgis-value-picker-slider/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { LitElement as c } from "@arcgis/lumina";
import { css as l, html as s } from "lit";
import { usePropertyChange as n } from "@arcgis/lumina/controllers";
const h = l`:host{display:flex;flex:auto;padding-inline:var(--calcite-space-sm)}arcgis-slider{flex:auto}arcgis-ticks{--arcgis-ticks-font-size: var(--calcite-font-size--3);--arcgis-ticks-gap: var(--calcite-space-base)}.content-end-stack{display:flex;flex-direction:column;flex:1}.ticks-stack{height:var(--calcite-space-sm);position:relative}.ticks-stack arcgis-ticks{inset:var(--calcite-space-none);position:absolute}.label-ticks{--arcgis-ticks-tick-length: var(--calcite-space-2xs);--arcgis-ticks-tick-color: transparent}.minor-ticks{--arcgis-ticks-tick-length: var(--calcite-space-2xs)}.major-ticks{--arcgis-ticks-tick-length: var(--calcite-space-sm)}:host([layout="vertical"]){padding-inline:var(--calcite-space-none);width:var(--calcite-size-xl);arcgis-ticks{--arcgis-ticks-gap: var(--calcite-space-sm)}.content-end-stack{position:relative}.ticks-stack{height:100%}.label-ticks{inset:var(--calcite-space-none);position:absolute}}`;
class o extends c {
  constructor() {
    super(...arguments), this.autoDestroyDisabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.disabled = !1, this.layout = "horizontal", this.mirrored = !1, this.arcgisPropertyChange = n()("canNext", "canPlay", "canPrevious", "currentValue");
  }
  static {
    this.properties = { autoDestroyDisabled: 5, canNext: 5, canPlay: 5, canPrevious: 5, currentValue: 9, disabled: 5, labelFormatter: 0, labels: 0, layout: 3, max: 9, min: 9, mirrored: 5, steps: 0, majorTicks: 0, minorTicks: 0 };
  }
  static {
    this.styles = h;
  }
  get _ascending() {
    return this.layout === "horizontal" && !this.mirrored || this.layout === "vertical" && this.mirrored;
  }
  async destroy() {
    await this.manager.destroy();
  }
  reset() {
    this.currentValue = this._ascending ? this.steps?.at(0) : this.steps?.at(-1);
  }
  step(t) {
    if (!this.steps || this.currentValue === void 0)
      return;
    const e = t === "next" === this._ascending ? 1 : -1, a = this.steps.indexOf(this.currentValue) + e;
    a >= this.steps.length || a < 0 || (this.currentValue = this.steps[a], this._checkState());
  }
  connectedCallback() {
    super.connectedCallback(), this.el.hidden = !0;
  }
  willUpdate(t) {
    t.has("steps") && this.steps?.length && (this.min ??= this.steps[0], this.max ??= this.steps.at(-1)), (t.has("currentValue") || t.has("max")) && this.max !== void 0 && (this.currentValue ??= this.max), this.el.hidden = this.min === void 0 || this.max === void 0 || this.currentValue === void 0, this._checkState();
  }
  _checkState() {
    if (!this.steps?.length) {
      this.canPlay = !1, this.canNext = !1, this.canPrevious = !1;
      return;
    }
    this.canPlay = !0;
    const t = this.steps.findIndex((e) => e === this.currentValue), i = this.steps.length - 1;
    this.canNext = this._ascending ? t < i : t > 0, this.canPrevious = this._ascending ? t > 0 : t < i;
  }
  _handleSliderChange(t) {
    this.currentValue = t.currentTarget.values[0], this._checkState();
  }
  _handleSliderInput(t) {
    this.currentValue = t.currentTarget.values[0], this._checkState();
  }
  render() {
    return this.currentValue === void 0 ? null : s`<arcgis-slider .disabled=${this.disabled} .layout=${this.layout} .min=${this.min} .max=${this.max} .steps=${this.steps} .mirrored=${this.mirrored} .values=${[this.currentValue]} @arcgisInput=${(t) => this._handleSliderInput(t)} @arcgisChange=${(t) => this._handleSliderChange(t)}>${(this.majorTicks?.length || this.minorTicks?.length || this.labels?.length) && s`<div slot=content-end class="content-end-stack">${(this.majorTicks?.length || this.minorTicks?.length) && s`<div class="ticks-stack">${this.majorTicks?.length && s`<arcgis-ticks .layout=${this.layout} class="major-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.majorTicks} mode=value></arcgis-ticks>` || ""}${this.minorTicks?.length && s`<arcgis-ticks .layout=${this.layout} class="minor-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.minorTicks} mode=value></arcgis-ticks>` || ""}</div>` || ""}${this.labels?.length && s`<arcgis-ticks .layout=${this.layout} class="label-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.labels} mode=value show-labels label-placement=end .labelFormatter=${this.labelFormatter}></arcgis-ticks>` || ""}</div>` || ""}</arcgis-slider>`;
  }
}
r("arcgis-value-picker-slider", o);
export {
  o as ArcgisValuePickerSlider
};