@geoscene/common-components 5.0.19

package/dist/components/geoscene-slider/index.d.ts

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

package/dist/components/geoscene-slider/index.js

@@ -0,0 +1,3 @@
+import "@geoscene/calcite-components/components/calcite-popover";
+import "../geoscene-label-input/index.js";
+export * from "./customElement.js";

package/dist/components/geoscene-slider-input/customElement.d.ts

@@ -0,0 +1,60 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+
+/** @internal */
+export abstract class GeosceneSliderInput extends LitElement {
+  /**
+   * If true, prevents interaction with the component.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Handle LTR and RTL label placement.
+   *
+   * @default false
+   */
+  accessor flipLabels: boolean;
+  /** Label for the component. */
+  accessor label: string | undefined;
+  /**
+   * Max value for the component.
+   *
+   * @default 100
+   */
+  accessor max: number;
+  /**
+   * Min value for the component.
+   *
+   * @default 0
+   */
+  accessor min: number;
+  /**
+   * Increment interval for the component.
+   *
+   * @default 1
+   */
+  accessor step: number;
+  /** If provided, specifies units for the input. */
+  accessor unitsLabel: string | undefined;
+  /**
+   * Initial value for the component.
+   *
+   * @default 50
+   */
+  accessor value: number;
+  /**
+   * If true, adds up/down arrows to the input.
+   *
+   * @default false
+   */
+  accessor withSteppers: boolean;
+  /** @deprecated use geosceneValueChange instead. */
+  readonly geosceneSliderInputValueChange: import("@geoscene/lumina").TargetedEvent<this, number>;
+  /** Emitted when the value has changed. */
+  readonly geosceneValueChange: import("@geoscene/lumina").TargetedEvent<this, number>;
+  readonly "@eventTypes": {
+    geosceneSliderInputValueChange: GeosceneSliderInput["geosceneSliderInputValueChange"]["detail"];
+    geosceneValueChange: GeosceneSliderInput["geosceneValueChange"]["detail"];
+  };
+}

package/dist/components/geoscene-slider-input/customElement.js

@@ -0,0 +1,29 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as d } from "../../chunks/runtime.js";
+import { css as h, html as m } from "lit";
+import { LitElement as o, createEvent as c } from "@geoscene/lumina";
+import { debounce as b } from "@geoscene/toolkit/function";
+const g = h`.container{display:flex;align-items:center;justify-content:space-between;position:relative}.slider{width:50%}.input{width:45%}`;
+class $ extends o {
+  constructor() {
+    super(...arguments), this.debouncedApplyValueOnChange = b((e) => this.applyValueOnChange(e), 800), this.disabled = !1, this.flipLabels = !1, this.min = 0, this.max = 100, this.value = 50, this.step = 1, this.withSteppers = !1, this.geosceneSliderInputValueChange = c(), this.geosceneValueChange = c();
+  }
+  static {
+    this.properties = { disabled: 5, label: 1, flipLabels: 5, min: 9, max: 9, value: 9, step: 9, unitsLabel: 1, withSteppers: 5 };
+  }
+  static {
+    this.styles = g;
+  }
+  applyValueOnChange(e) {
+    const { min: i, max: a, value: n } = this, s = Number(e.value), t = i !== void 0 && a !== void 0 ? Math.min(a, Math.max(i, s)) : s;
+    s !== n && (e.value = `${t}`, this.geosceneValueChange.emit(t), this.geosceneSliderInputValueChange.emit(t), this.value = t);
+  }
+  render() {
+    const { disabled: e, min: i, max: a, value: n, step: s, withSteppers: t, flipLabels: r, unitsLabel: p, label: u } = this;
+    return m`<div class="container"><calcite-slider class="slider" .disabled=${e} .min=${i} .max=${a} .value=${n} .step=${s} @calciteSliderInput=${(l) => this.debouncedApplyValueOnChange(l.currentTarget)}></calcite-slider><calcite-input class="input" .disabled=${e} .min=${i} .max=${a} .numberButtonType=${t ? "vertical" : "none"} .prefixText=${r ? p : ""} @calciteInputInput=${(l) => this.debouncedApplyValueOnChange(l.target)} @click=${(l) => l.stopPropagation()} scale=s step=any .suffixText=${r ? "" : p} type=number .value=${`${n}`} .label=${u}></calcite-input></div>`;
+  }
+}
+d("geoscene-slider-input", $);
+export {
+  $ as GeosceneSliderInput
+};

package/dist/components/geoscene-slider-input/index.d.ts

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

package/dist/components/geoscene-slider-input/index.js

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

package/dist/components/geoscene-ticks/customElement.d.ts

@@ -0,0 +1,190 @@
+/// <reference path="../../index.d.ts" />
+/// <reference types="@geoscene/core/interfaces.d.ts" />
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { Layout, TickMode, TickValues } from "./types.js";
+
+/**
+ * The ticks component displays visual markers along a line to indicate scale, intervals, or specific values. It is often used in conjunction with the
+ * [Slider component](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-slider/). Ticks help users understand the
+ * slider’s range and make more precise selections.
+ *
+ * Tick placement is controlled by the [mode](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#mode), which defines how the [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) are parsed and translated into positions along the
+ * line. Tick positions are derived from the component’s [min](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#min) and [max](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#max) range, with optional none-linear scaling via
+ * [interpolationExponent](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#interpolationExponent). Ticks can be displayed in vertical or horizontal [layout](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#layout), with optional [showLabels](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#showLabels) and a [showBaseline](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#showBaseline).
+ * The component can also be made [interactive](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#interactive) to respond to user clicks on individual ticks. The [labelFormatter](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#labelFormatter) property allows customization of tick label formatting.
+ *
+ * @cssproperty [--geoscene-ticks-tick-length] - Specifies the length of the ticks.
+ * @cssproperty [--geoscene-ticks-tick-color] - Specifies the color of the ticks.
+ * @cssproperty [--geoscene-ticks-gap] - Specifies the gap between the ticks and labels.
+ * @since 5.0
+ * @example
+ * The following example creates a vertical slider with vertical ticks displayed at every 10 units from 0 to 100.
+ * The ticks are labeled and positioned on the end side of the slider.
+ * ```html
+ * <geoscene-slider id="sliderComponent" min="0" max="100" show-range-labels values="50" layout="vertical">
+ *    <geoscene-ticks slot="content-end" style="flex:1;"
+ *      min="0" max="100"
+ *      mode="value"
+ *      show-labels
+ *      label-placement="end"
+ *      values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
+ *      layout="vertical">
+ *    </geoscene-ticks>
+ * </geoscene-slider>
+ * ```
+ */
+export abstract class GeosceneTicks extends LitElement {
+  /**
+   * When `true`, ticks are clickable and the component emits  [@geosceneTickClick](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#event-geosceneTickClick) when the user selects a tick.
+   *
+   * @default false
+   * @see [@geosceneTickClick](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#event-geosceneTickClick)
+   */
+  accessor interactive: boolean;
+  /**
+   * The exponent used to interpolate the position of ticks along the component.
+   * A value of `0` indicates linear interpolation. Positive values indicate exponential interpolation, and negative values indicate logarithmic interpolation.
+   *
+   * Set this property when the range of values is large and users need precision in the lower range of values (for an exponential interpolation), or in the higher range (for a logarithmic interpolation).
+   *
+   * ```tsx
+   * <geoscene-ticks interpolation-exponent={14} min={1} max={5518000} mode="value" values={[1, 11500, 5518000]} />
+   * ```
+   *
+   * @default 0
+   */
+  accessor interpolationExponent: number;
+  /**
+   * Allows customizing how tick labels are formatted based on their numeric value.
+   *
+   * @example
+   * The following example formats tick labels as percentages.
+   * ```js
+   * const ticks = document.querySelector("geoscene-ticks");
+   * ticks.labelFormatter = (value, defaultFormatter) => {
+   *   return value + "%";
+   * };
+   * ```
+   */
+  accessor labelFormatter: ((value: number, defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  /**
+   * Determines whether the labels are placed before or after the ticks.
+   *
+   * @default "end"
+   */
+  accessor labelPlacement: "end" | "start";
+  /**
+   * Determines the layout/orientation of the ticks component. By default, the ticks will render horizontally.
+   * When set to `vertical`, the ticks will render vertically.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: Layout;
+  /**
+   * The component's maximum rendered value.
+   *
+   * @default 100
+   */
+  accessor max: number;
+  /**
+   * The component's minimum rendered value.
+   *
+   * @default 0
+   */
+  accessor min: number;
+  /**
+   * When `true`, the values are displayed from high to low.
+   *
+   * @default false
+   */
+  accessor mirrored: boolean;
+  /**
+   * The mode or method of positioning ticks along the component. It drives how [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is interpreted.
+   * - `count`: Places a fixed number of ticks (provided in the [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) property) at equal distances from each other.
+   * - `percent`: [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is interpreted as percentage. If [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
+   * - `value`: Indicates that ticks will only be placed at the values specified in the property.
+   *
+   * @default "count"
+   * @example
+   * ```html
+   * <!-- Place ticks at each value listed in `values` -->
+   * <geoscene-slider min="0" max="100" show-range-labels values="20, 50">
+   *   <geoscene-ticks
+   *     slot="content-end" style="flex:1;"
+   *     min="0" max="100"
+   *     show-labels label-placement="end"
+   *     mode="value"
+   *     values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100">
+   *   </geoscene-ticks>
+   * </geoscene-slider>
+   * ```
+   * @example
+   * In count mode, values is the number of ticks to render (not a list of tick values).
+   * For example, use `11` ticks to show 0–100 in steps of 10 (0, 10, 20, ..., 100).
+   * ```html
+   * <!-- 11 ticks from 0 to 100 -->
+   * <geoscene-slider min="0" max="100" show-range-labels values="20, 50">
+   *   <geoscene-ticks
+   *     slot="content-end" style="flex:1;"
+   *     min="0" max="100"
+   *     show-labels label-placement="end"
+   *     mode="count"
+   *     values="11">
+   *   </geoscene-ticks>
+   * </geoscene-slider>
+   * ```
+   * @example
+   * In percent mode, values are percentages along the track.
+   * Use an array to place ticks at specific percentages, or a single number as a repeating interval.
+   * ```html
+   * <!-- Ticks at 0%, 25%, 50%, 75%, and 100% -->
+   * <geoscene-slider min="0" max="200" show-range-labels values="50, 150">
+   *   <geoscene-ticks
+   *     slot="content-end" style="flex:1;"
+   *     min="0" max="200"
+   *     show-labels label-placement="end"
+   *     mode="percent"
+   *     values="0, 25, 50, 75, 100">
+   *   </geoscene-ticks>
+   * </geoscene-slider>
+   * ```
+   * @see [values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values)
+   */
+  accessor mode: TickMode;
+  /**
+   * Indicates whether to render a line connecting the ticks.
+   *
+   * @default false
+   */
+  accessor showBaseline: boolean;
+  /**
+   * Indicates whether to render labels for the ticks.
+   *
+   * @default false
+   */
+  accessor showLabels: boolean;
+  /**
+   * Indicates where ticks will be rendered along the component.
+   * See the description for [mode](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#mode) for more information about how this property is interpreted by each mode.
+   *
+   * @see [mode](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#mode)
+   */
+  accessor values: TickValues;
+  /**
+   * Fires when the user clicks on one of the ticks. This event is only emitted when the [interactive](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#interactive) property is set to `true`.
+   *
+   * @see [interactive](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#interactive)
+   * @example
+   * The following example listens for the `geosceneTickClick` event and logs the clicked tick's value.
+   * ```js
+   * const ticks = document.querySelector("geoscene-ticks");
+   * ticks.addEventListener("geosceneTickClick", (event) => {
+   *   console.log("Clicked tick value:", event.detail.value);
+   * });
+   * ```
+   */
+  readonly geosceneTickClick: import("@geoscene/lumina").TargetedEvent<this, { value: number; }>;
+  readonly "@eventTypes": {
+    geosceneTickClick: GeosceneTicks["geosceneTickClick"]["detail"];
+  };
+}

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

@@ -0,0 +1,141 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as $ } from "../../chunks/runtime.js";
+import { css as M, html as c } from "lit";
+import { LitElement as _, createEvent as C, safeClassMap as h, safeStyleMap as u, nothing as v } from "@geoscene/lumina";
+import { formatNumber as z } from "@geoscene/core/intl.js";
+const n = {
+  container: "container",
+  ticksContainer: "ticks-container",
+  labelsContainer: "labels-container",
+  tick: "tick",
+  tickMin: "tick--min",
+  tickMax: "tick--max",
+  tickLabel: "tick-label",
+  baseline: "baseline"
+}, A = M`:host{display:flex;--geoscene-ticks-tick-length: .5rem;--geoscene-ticks-tick-color: var(--calcite-color-border-input);--geoscene-ticks-gap: 1em;--geoscene-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--geoscene-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--geoscene-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--geoscene-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--geoscene-ticks-label-text-align, center);width:var(--geoscene-ticks-label-width, var(--labels-container-width, "auto"))}:host([layout="horizontal"]){.ticks-container{height:var(--geoscene-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--geoscene-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--geoscene-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--geoscene-ticks-tick-length);height:.125rem;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(--geoscene-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--geoscene-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--geoscene-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--geoscene-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(--geoscene-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--geoscene-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:hover{text-decoration:underline}}`;
+class F extends _ {
+  constructor() {
+    super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), 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.geosceneTickClick = C({ cancelable: !1 });
+  }
+  static {
+    this.properties = { _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: {
+      fromAttribute(e) {
+        if (e.includes(","))
+          return e.split(",").filter((t) => t.trim() !== "").map(parseFloat).filter((t) => Number.isFinite(t));
+        {
+          const t = parseFloat(e);
+          return Number.isFinite(t) ? [t] : [];
+        }
+      }
+    } }] };
+  }
+  static {
+    this.styles = A;
+  }
+  updated() {
+    const e = this.renderRoot.querySelector(`.${n.labelsContainer}`);
+    if (e) {
+      let t = 0, i = 0;
+      for (const r of this.renderRoot.querySelectorAll(`.${n.tickLabel}`)) {
+        const a = r.getBoundingClientRect();
+        t = Math.max(t, a.width), i = Math.max(i, a.height);
+      }
+      t = Math.ceil(t), i = Math.ceil(i), !t || !i ? (e.style.removeProperty("--labels-container-width"), e.style.removeProperty("--labels-container-height")) : (e.style.setProperty("--labels-container-width", `${t}px`), e.style.setProperty("--labels-container-height", `${i}px`));
+    }
+  }
+  _handleClick(e) {
+    if (!this.interactive)
+      return;
+    const i = e.target.dataset.value;
+    i && this.geosceneTickClick.emit({ value: Number(i) });
+  }
+  _internalLabelFormatter(e) {
+    const t = this.labelFormatter;
+    if (!t)
+      return this._formatValue(e);
+    const i = t(e, this._formatValue);
+    return i ?? this._formatValue(e);
+  }
+  render() {
+    return c`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
+  }
+  _renderContent() {
+    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: o, mirrored: l, showLabels: x } = this, g = [], b = [];
+    for (const [f, d] of L(r, i, t, e, a)) {
+      const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${f}%` }, w = {
+        [n.tick]: !0,
+        [n.tickMin]: f === 0,
+        [n.tickMax]: f === 100
+      };
+      g.push(c`<div class=${h(w)} style=${u(p)} data-value=${d ?? v}></div>`), x && b.push(c`<div class=${h(n.tickLabel)} style=${u(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
+    }
+    return [c`<div class=${h(n.labelsContainer)}>${b}</div>`, c`<div class=${h(n.ticksContainer)}>${g}</div>`];
+  }
+  _renderBaseline() {
+    const { showBaseline: e, layout: t } = this;
+    return e && c`<div class=${h(n.baseline)} style=${u({
+      [t === "horizontal" ? "width" : "height"]: "100%",
+      [t === "horizontal" ? "height" : "width"]: "0.125rem"
+    })}></div>` || "";
+  }
+}
+function* L(s, e, t, i, r) {
+  switch (s) {
+    case "value": {
+      const a = Array.isArray(r) ? r : [r];
+      for (const o of a) {
+        const l = P(e, t, o, i) * 100;
+        l >= 0 && l <= 100 && (yield [l, o]);
+      }
+      break;
+    }
+    case "percent": {
+      if (Array.isArray(r))
+        for (const a of r)
+          a >= 0 && a <= 100 && (yield [a, m(e, t, a / 100, i)]);
+      else if (r > 0)
+        for (let a = 0; a <= 100; a += r)
+          yield [a, m(e, t, a / 100, i)];
+      break;
+    }
+    case "count": {
+      const a = Array.isArray(r) ? r[0] : r;
+      if (a <= 1)
+        yield [50, m(e, t, 0.5, i)];
+      else
+        for (let o = 0; o < a; o++) {
+          const l = o * 100 / (a - 1);
+          yield [l, m(e, t, l / 100, i)];
+        }
+      break;
+    }
+  }
+}
+function k(s, e, t) {
+  return t < s ? s : t > e ? e : t;
+}
+function y(s, e, t) {
+  return s + (e - s) * t;
+}
+function P(s, e, t, i = 0) {
+  let r = (t - s) / (e - s);
+  if (r = k(0, 1, r), Math.abs(i) < 1e-9)
+    return r;
+  const a = 1 + Math.expm1(i) * r;
+  return r = Math.log(a) / i, k(0, 1, r);
+}
+function m(s, e, t, i = 0) {
+  if (t = k(0, 1, t), Math.abs(i) < 1e-9)
+    return y(s, e, t);
+  const r = Math.expm1(i * t) / Math.expm1(i);
+  return y(s, e, r);
+}
+$("geoscene-ticks", F);
+export {
+  F as GeosceneTicks
+};

package/dist/components/geoscene-ticks/index.d.ts

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

package/dist/components/geoscene-ticks/index.js

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

package/dist/components/geoscene-ticks/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The layout of the [geoscene-ticks](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/) component, which determines the orientation of the ticks.
+ *
+ * @since 5.0
+ */
+export type Layout = "horizontal" | "vertical";
+
+/**
+ * The mode of positioning ticks along the [geoscene-ticks](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/) component. It drives how [geoscene-ticks.values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is interpreted.
+ * - `count`: Places a fixed number of ticks (provided in the [geoscene-ticks.values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) property) at equal distances from each other.
+ * - `percent`: [geoscene-ticks.values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is interpreted as percentage. If [geoscene-ticks.values](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/#values) is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
+ * - `value`: Indicates that ticks will only be placed at the values specified in the property.
+ *
+ * @since 5.0
+ */
+export type TickMode = "count" | "percent" | "value";
+
+/**
+ * Indicates where ticks will be rendered along the [geoscene-ticks](https://doc.geoscene.cn/javascript/5.0/references/common-components/components/geoscene-ticks/) component.
+ *
+ * @since 5.0
+ */
+export type TickValues = number[] | number;

package/dist/components/geoscene-unique-values-list/customElement.d.ts

@@ -0,0 +1,115 @@
+/// <reference path="../../index.d.ts" />
+/// <reference types="@geoscene/core/interfaces.d.ts" />
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { SupportedLayer } from "./utils/basic.js";
+import type { FieldSource } from "../../utils/types.js";
+import type { T9nMeta } from "@geoscene/lumina/controllers";
+
+/**
+ * Displays a list of unique values taking into account field type formatting and field domains.
+ *
+ * @internal
+ */
+export abstract class GeosceneUniqueValuesList extends LitElement {
+  /** @internal */
+  protected _messages: {
+      searchValues: string;
+      sortValues: string;
+      values: string;
+      sortByCount: string;
+      sortAlphabetical: string;
+      sortAscending: string;
+      sortSelected: string;
+      errors: { tooManyUniqueValues: string; };
+  } & T9nMeta<{
+      searchValues: string;
+      sortValues: string;
+      values: string;
+      sortByCount: string;
+      sortAlphabetical: string;
+      sortAscending: string;
+      sortSelected: string;
+      errors: { tooManyUniqueValues: string; };
+  }>;
+  /** Field name, required if uniqueValues is not provided, if component needs to format values, or needs to check for field domains. */
+  accessor fieldName: string | undefined;
+  /** Optional, specify field source other than the layer's fields. */
+  accessor fieldSource: FieldSource | undefined;
+  /** Layer instance, required if uniqueValues is not provided, if component needs to format values, or needs to check for field domains. */
+  accessor layer: SupportedLayer | undefined;
+  /** Optional, max height of list in pixel. */
+  accessor maxHeight: number | undefined;
+  /**
+   * Multiple selections allowed?
+   *
+   * @default false
+   */
+  accessor multiple: boolean | undefined;
+  /**
+   * Optional format options if values are numbers.
+   *
+   * e.g.
+   *      {
+   *        style: "decimal",
+   *        useGrouping: true,
+   *        minimumFractionDigits: 0,
+   *        maximumFractionDigits: 2
+   *      }
+   *
+   *      {
+   *        style: "percent",
+   *        useGrouping: true
+   *      }
+   *
+   *      {
+   *        style: "currency",
+   *        currency: "EUR",
+   *        currencyDisplay: "symbol"
+   *      }
+   */
+  accessor numberFormatOptions: Intl.NumberFormatOptions | undefined;
+  /**
+   * Too many values? If true then it displays a message below the list. Only required if uniqueValues is provided.
+   *
+   * @default false
+   */
+  accessor partialUniqueValues: boolean | undefined;
+  /** Lists of selected values */
+  accessor selectedValues: (number | string)[] | undefined;
+  /**
+   * If true, displays the filter option based on the number of fields.
+   *
+   * @default 10
+   */
+  accessor showFilterLength: number;
+  /** Sort by default setting */
+  accessor sortBy: "count" | "name" | "selected" | undefined;
+  /**
+   * List of all unique values. If not provided component will get the unique values from the layer.
+   * An empty list would mean that there are no unique values for this field on the layer. The component renders nothing then.
+   */
+  accessor uniqueValues: __geoscene.UniqueValuesResultUniqueValueInfos[] | undefined;
+  /** MapView instance, required if uniqueValues is not provided and/or to display dates in the correct timezone */
+  accessor view: __geoscene.MapView | __geoscene.SceneView | undefined;
+  /**
+   * Get all unique values.
+   * E.g. to be used to limit how often these unique values need to be requested from the layer.
+   */
+  getUniqueValues(): Promise<{
+      uniqueValues: __geoscene.UniqueValuesResultUniqueValueInfos[];
+      partialUniqueValues: boolean;
+  } | undefined>;
+  /** Sets focus on component */
+  setFocus(): Promise<void>;
+  /** Emitted if selection has changed */
+  readonly geosceneChange: import("@geoscene/lumina").TargetedEvent<this, (number | string)[]>;
+  /** Emitted once the component is loaded. Useful when no uniqueValues were passed in. */
+  readonly geosceneLoad: import("@geoscene/lumina").TargetedEvent<this, void>;
+  /** Emitted if the sort order has changed */
+  readonly geosceneSortByChange: import("@geoscene/lumina").TargetedEvent<this, string | undefined>;
+  readonly "@eventTypes": {
+    geosceneChange: GeosceneUniqueValuesList["geosceneChange"]["detail"];
+    geosceneLoad: GeosceneUniqueValuesList["geosceneLoad"]["detail"];
+    geosceneSortByChange: GeosceneUniqueValuesList["geosceneSortByChange"]["detail"];
+  };
+}