@geoscene/common-components 5.0.19

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

@@ -0,0 +1,44 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { IPopoverProps } from "../../utils/types.js";
+import type { Icon as Icon } from "@geoscene/calcite-components/components/calcite-icon";
+
+/** @internal */
+export abstract class GeoscenePickerInput extends LitElement {
+  /**
+   * If true, disables the component.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Heading for the component. */
+  accessor heading: string | undefined;
+  /**
+   * Icon to display at the end of the component.
+   *
+   * @default "pencil"
+   */
+  accessor iconEnd: Icon["icon"];
+  /** Text to display within the "Done" button. */
+  accessor intlDone: string | undefined;
+  /**
+   * Label for the component
+   *
+   * @default ""
+   */
+  accessor label: string;
+  /** Convenience prop to specify common popover props. */
+  accessor popoverProps: IPopoverProps | undefined;
+  /** Close the component. */
+  close(): Promise<void>;
+  /** Set focus on the component. */
+  setFocus(): Promise<void>;
+  /** Emitted when the component has been closed. */
+  readonly geoscenePopoverClose: import("@geoscene/lumina").TargetedEvent<this, void>;
+  /** Emitted when the component has been opened. */
+  readonly geoscenePopoverOpen: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geoscenePopoverClose: GeoscenePickerInput["geoscenePopoverClose"]["detail"];
+    geoscenePopoverOpen: GeoscenePickerInput["geoscenePopoverOpen"]["detail"];
+  };
+}

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

@@ -0,0 +1,57 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+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 "@geoscene/lumina";
+import { createRef as r, ref as t } from "lit/directives/ref.js";
+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.geoscenePopoverOpen = i(), this.geoscenePopoverClose = i(), this.listenOn(document.body, "geoscenePopoverOpen", this.onPopoverOpen);
+  }
+  static {
+    this.properties = { open: 16, disabled: 7, heading: 1, iconEnd: 1, 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.geoscenePopoverOpen.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.geoscenePopoverClose.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("geoscene-picker-input", p);
+export {
+  p as GeoscenePickerInput
+};

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

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

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

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

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

@@ -0,0 +1,21 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@geoscene/core/Color.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+
+/** @internal */
+export abstract class GeosceneRampColor extends LitElement {
+  /** @default "horizontal" */
+  accessor layout: "horizontal" | "vertical";
+  /** @default 1 */
+  accessor max: number;
+  /** @default 0 */
+  accessor min: number;
+  accessor stops: ColorStop[];
+}
+
+/** @internal */
+export interface ColorStop {
+  color: Color | string;
+  value: number;
+  size?: number;
+}

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

@@ -0,0 +1,82 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as f } from "../../chunks/runtime.js";
+import w from "@geoscene/core/Color.js";
+import { LitElement as x, nothing as u, safeClassMap as C } from "@geoscene/lumina";
+import { css as v, svg as p, html as b } from "lit";
+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("geoscene-ramp-color", D);
+export {
+  D as GeosceneRampColor
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@geoscene/core/Color.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneRampColor } from "../geoscene-ramp-color/customElement.js";
+
+/** @internal */
+export abstract class GeosceneRampColorBreak extends LitElement {
+  /** @default "horizontal" */
+  accessor layout: GeosceneRampColor["layout"];
+  /** @default 1 */
+  accessor max: number;
+  /** @default 0 */
+  accessor min: number;
+  accessor stops: ColorBreak[];
+}
+
+/** @internal */
+export interface ColorBreak {
+  color: Color | string;
+  max: number;
+  min: number;
+}

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

@@ -0,0 +1,38 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import { LitElement as m } from "@geoscene/lumina";
+import { css as p, html as c } from "lit";
+const n = p`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}geoscene-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`<geoscene-ramp-color .layout=${this.layout} .min=${this.min} .max=${this.max} .stops=${this._rampStops}></geoscene-ramp-color>`;
+  }
+}
+l("geoscene-ramp-color-break", h);
+export {
+  h as GeosceneRampColorBreak
+};

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

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

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

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

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

@@ -0,0 +1,19 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@geoscene/core/Color.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneRampColor } from "../geoscene-ramp-color/customElement.js";
+
+/** @internal */
+export abstract class GeosceneRampOpacity extends LitElement {
+  accessor fillColor: Color | string;
+  /** @default "horizontal" */
+  accessor layout: GeosceneRampColor["layout"];
+  /** @default 1 */
+  accessor max: number;
+  /** @default 0 */
+  accessor min: number;
+  accessor stops: {
+      value: number;
+      opacity: number;
+  }[];
+}

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

@@ -0,0 +1,33 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import t from "@geoscene/core/Color.js";
+import { LitElement as e } from "@geoscene/lumina";
+import { css as m, html as n } from "lit";
+const p = m`:host{display:block;block-size:30px;inline-size:100%}:host([layout="vertical"]){writing-mode:vertical-lr}geoscene-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`<geoscene-ramp-color .layout=${this.layout} .stops=${this._rampStops} .min=${this.min} .max=${this.max}></geoscene-ramp-color>`;
+  }
+}
+c("geoscene-ramp-opacity", h);
+export {
+  h as GeosceneRampOpacity
+};

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

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

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

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