@geoscene/common-components 5.0.19

package/dist/components/geoscene-unique-values-list/customElement.js

@@ -0,0 +1,303 @@
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as P } from "../../chunks/runtime.js";
+import { css as W, html as F } from "lit";
+import { keyed as z } from "lit/directives/keyed.js";
+import { LitElement as H, createEvent as D } from "@geoscene/lumina";
+import { Task as j } from "@lit/task";
+import { createRef as G, ref as x } from "lit/directives/ref.js";
+import { log as S, composeMissingPropertyMessage as N } from "@geoscene/toolkit/log";
+import { formatDate as w, convertDateFormatToIntlOptions as b, formatDateOnly as J, formatTimeOnly as K, formatTimestamp as O, formatNumber as Q } from "@geoscene/core/intl.js";
+import X from "@geoscene/core/smartMapping/statistics/uniqueValues.js";
+import { clone as I } from "@geoscene/core/core/lang.js";
+import { i as h } from "../../chunks/commonFunctions.js";
+import { u as Y } from "../../chunks/useT9n.js";
+function U(i) {
+  return (/* @__PURE__ */ new Date(`1970-01-01T${i}Z`)).getTime();
+}
+function L(i) {
+  return (/* @__PURE__ */ new Date(`${i} 00:00:00`)).getTime();
+}
+function ee(i, e, s) {
+  let t;
+  return e === "unknown" ? t = w(i, {
+    ...b("short-date-short-time"),
+    timeZone: "utc",
+    timeZoneName: "shortOffset"
+  }) : t = w(i, {
+    ...b("short-date-short-time"),
+    timeZone: e
+  }), t;
+}
+function te(i) {
+  return i ? J(i, b("short-date")) : "";
+}
+function ie(i) {
+  let e;
+  return typeof i == "string" ? e = K(i, b("short-date-long-time")) : e = w(i, {
+    ...b("long-time"),
+    timeZone: "utc"
+  }), e;
+}
+function se(i, e) {
+  return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? O(i, {
+    ...b("short-date-short-time"),
+    timeZone: "utc",
+    timeZoneName: "shortOffset"
+  }) : O(i, {
+    ...b("short-date-short-time"),
+    timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
+  }) : e && "timeZone" in e && e.timeZone === "unknown" ? w(i, {
+    ...b("short-date-short-time"),
+    timeZone: "utc",
+    timeZoneName: "shortOffset"
+  }) : w(i, {
+    ...b("short-date-short-time"),
+    timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
+  });
+}
+function R(i, e, s) {
+  if (i.type !== "feature" && i.type !== "subtype-group" && i.type !== "subtype-sublayer" && i.type !== "imagery")
+    return;
+  let t;
+  return E(i, s).fields.forEach((p) => {
+    const l = p.name, a = "domain" in p ? p.domain : void 0;
+    if (i.type !== "imagery" && i.subtypeField === l) {
+      let c;
+      i.type === "subtype-group" || i.type === "feature" ? c = i.subtypes : c = i.parent.subtypes, c.forEach((r) => {
+        i.type === "subtype-sublayer" && i.subtypeCode !== r.code || (e.name === l && (t = t || [], t.push({ code: r.code, name: r.name })), r.domains && Object.keys(r.domains).forEach((d) => {
+          if (e.name === d) {
+            const o = r.domains[d];
+            o?.type === "coded-value" && o?.codedValues && o.codedValues.forEach((n) => {
+              let g = !1;
+              t = t || [], t.forEach((v) => {
+                v.code === n.code && (g = !0, `| ${v.name} |`.includes(`| ${n.name} |`) || (v.name += ` | ${n.name}`));
+              }), g || t.push({ code: n.code, name: n.name });
+            });
+          }
+        }));
+      });
+    }
+    if (e.name === l && (i.type === "feature" || i.type === "imagery")) {
+      const c = i.type === "feature" ? i.typeIdField : void 0, r = i.type === "feature" ? i.types : void 0;
+      i.type === "feature" && c && r ? (c === l ? t = r.map(
+        (d) => (
+          // fake coded Values
+          {
+            code: d.id,
+            name: d.name
+          }
+        )
+      ) : (t = t || [], r.forEach((d) => {
+        if (!d.domains?.[l] || d.domains[l].type === "inherited") {
+          const o = a;
+          o?.codedValues && o.codedValues.forEach((n) => {
+            let g = !1;
+            t.forEach((v) => {
+              v.code === n.code && (g = !0, `| ${v.name} |`.includes(`| ${n.name} |`) || (v.name += ` | ${n.name}`));
+            }), g || t.push(I(n));
+          });
+        } else d.domains?.[l]?.codedValues && d.domains[l].codedValues.forEach((o) => {
+          let n = !1;
+          t.forEach((g) => {
+            g.code === o.code && (n = !0, `| ${g.name} |`.includes(`| ${o.name} |`) || (g.name += ` | ${o.name}`));
+          }), n || t.push(I(o));
+        });
+      })), !t?.length && a?.codedValues && (t = I(a.codedValues))) : a?.codedValues && (t = a.codedValues);
+    }
+  }), t;
+}
+function Z(i, e) {
+  const s = e;
+  if (s) {
+    let t = "";
+    for (let u = 0; u < s.length; u++) {
+      const p = s[u];
+      p.code == i && (t += (t.length ? " | " : "") + p.name);
+    }
+    return t.length || (t = `${i}`), t;
+  }
+  return i;
+}
+function B(i) {
+  return ["small-integer", "big-integer", "integer", "single", "double", "long"].includes(i.type);
+}
+function k(i) {
+  switch (i.type) {
+    case "small-integer":
+    case "big-integer":
+    case "integer":
+    case "single":
+    case "double":
+    case "long":
+      return "number";
+    case "blob":
+    case "geometry":
+    case "global-id":
+    case "guid":
+    case "oid":
+    case "raster":
+    case "xml":
+      return;
+    default:
+      return i.type;
+  }
+}
+function E(i, e) {
+  return e === "feature-reduction" && "featureReduction" in i ? i.featureReduction : i;
+}
+const ne = W`:host{width:100%}.container{min-height:30px}.popover-unique-list{width:100%;overflow-y:auto}.unique-values-content-list-msg{font-size:75%;margin:5px}.count{padding:0 6px;font-size:smaller;white-space:nowrap}`;
+class oe extends H {
+  constructor() {
+    super(...arguments), this.dropdownNode = G(), this._messages = Y({ blocking: !0 }), this._propWatcherTask = new j(this, {
+      task: async ([e, s, t]) => {
+        const u = h(e) && h(s) || h(t);
+        if (!h(t) && !h(e) && !h(s) ? S("error", this, N("uniqueValues")) : h(t) || (h(e) || S("error", this, N("layer")), h(s) || S("error", this, N("fieldName"))), h(e) && h(s)) {
+          const { fieldSource: p } = this;
+          if (!E(e, p).fields?.filter((c) => c.name === s))
+            throw S("error", this, "Field could not be found."), new Error();
+        }
+        if (!u)
+          throw new Error();
+        await this.processProps();
+      },
+      args: () => [this.layer, this.fieldName, this.uniqueValues]
+    }), this.initialRender = !0, this.multiple = !1, this.partialUniqueValues = !1, this.showFilterLength = 10, this.geosceneChange = D(), this.geosceneSortByChange = D(), this.geosceneLoad = D();
+  }
+  static {
+    this.properties = { initialRender: 16, view: 0, layer: 0, fieldSource: 1, fieldName: 1, uniqueValues: 0, numberFormatOptions: 0, selectedValues: 0, sortBy: 1, multiple: 5, partialUniqueValues: 5, showFilterLength: 9, maxHeight: 9 };
+  }
+  static {
+    this.styles = ne;
+  }
+  async setFocus() {
+    this.listNode?.setFocus();
+  }
+  async getUniqueValues() {
+    const { fieldInfo: e } = this;
+    if (h(e?.uniqueValueInfos)) {
+      const { uniqueValueInfos: s, partialUniqueValues: t } = e;
+      return { uniqueValues: s, partialUniqueValues: t };
+    }
+  }
+  loaded() {
+    this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
+  }
+  async processProps() {
+    const { layer: e, fieldName: s, view: t, fieldSource: u } = this, l = (e ? E(e, u) : void 0)?.fields?.filter((a) => a.name === s)?.[0];
+    if (h(this.uniqueValues))
+      this.fieldInfo = {
+        layerField: l,
+        fieldDomains: e && l ? R(e, l, u) : void 0,
+        simpleType: e && l ? k(l) : void 0,
+        partialUniqueValues: this.partialUniqueValues ?? !1,
+        uniqueValueInfos: this.uniqueValues
+      }, this.geosceneLoad.emit();
+    else if (e && l) {
+      this.fieldInfo = {
+        layerField: l,
+        fieldDomains: R(e, l, u),
+        simpleType: k(l),
+        partialUniqueValues: !1
+      };
+      const { fieldInfo: a } = this;
+      try {
+        const c = await X({
+          layer: e,
+          view: t,
+          field: s,
+          sqlWhere: "definitionExpression" in e ? e.definitionExpression ?? void 0 : void 0,
+          forBinning: !1
+        }), r = B(l), d = c.uniqueValueInfos.filter((o) => h(o.value) ? l.type === "string" && !r || l.type === "guid" ? o.value !== "<Null>" && `${o.value}`.trim() !== "" : (B(l) || l.type === "oid" || r, o.value !== "<Null>" && o.value !== "") : !1);
+        d.sort((o, n) => o.count > n.count ? -1 : o.count < n.count ? 1 : 0), a.fieldDomains?.length && a.fieldDomains.forEach((o) => {
+          d.find((n) => n.value === o.code) || d.push({
+            value: o.code,
+            count: 0
+          });
+        }), a.uniqueValueInfos = d, a.partialUniqueValues = c.uniqueValueInfos.length === 2e3, this.geosceneLoad.emit();
+      } catch (c) {
+        if (S("error", this, `uniqueValues() - ${c.message}`), this.hasFieldDomains(a)) {
+          const d = [];
+          a.fieldDomains.forEach((o) => {
+            d.find((n) => n.value === o.code) || d.push({
+              value: o.code,
+              count: void 0
+            });
+          });
+        }
+      }
+      setTimeout(() => {
+        this.initialRender = !1, this.listNode?.setFocus();
+      }, 800);
+    }
+  }
+  setListRef(e) {
+    const { maxHeight: s } = this;
+    this.listNode = e, s && e?.setAttribute("style", `max-height: ${s || 400}px`);
+  }
+  onSortMenuSelect(e) {
+    const t = e.currentTarget.selectedItems?.[0].getAttribute("data-value");
+    this.sortBy = t || void 0, this.geosceneSortByChange.emit(t || void 0);
+  }
+  isSameLists(e, s) {
+    if (!e && !s)
+      return !0;
+    if (!e || !s || e?.length !== s?.length)
+      return !1;
+    for (let t = 0; t < e.length; t++)
+      if (e[t] !== s[t])
+        return !1;
+    return !0;
+  }
+  hasFieldDomains(e) {
+    return !!e.fieldDomains?.length;
+  }
+  render() {
+    return this._propWatcherTask.render({
+      complete: () => {
+        const { fieldInfo: e, selectedValues: s, sortBy: t, multiple: u, initialRender: p, showFilterLength: l, _messages: a } = this, { fieldDomains: c, uniqueValueInfos: r, partialUniqueValues: d, layerField: o } = e, n = o?.type;
+        if (!r?.length)
+          return "";
+        const g = n ? ["small-integer", "big-integer", "integer", "single", "double", "long", "oid"].includes(n) : !1, v = n ? ["date", "date-only", "time-only"].includes(n) : !1, A = (y) => {
+          y.sort(($, m) => $.count <= m.count ? 1 : -1);
+        }, C = (y) => {
+          const $ = c?.length;
+          y.sort((m, f) => {
+            if (!$ && g)
+              return (typeof m.value == "string" ? Number.parseFloat(m.value) : m.value) - (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value);
+            {
+              const q = $ ? Z(m.value, c) : m.value, V = $ ? Z(f.value, c) : f.value;
+              return `${q}`.startsWith("_") ? 1 : `${V}`.startsWith("_") ? -1 : `${q}`.localeCompare(`${V}`);
+            }
+          });
+        }, _ = (y, $) => {
+          y.sort((m, f) => {
+            const q = $?.indexOf(m.value) ?? -1, V = $?.indexOf(f.value) ?? -1;
+            return q === V || q > -1 && V > -1 ? 0 : q > V ? -1 : 1;
+          });
+        };
+        C(r), !t || t === "count" ? A(r) : t === "selected" && _(r, s);
+        const M = r.map((y) => this.renderUniqueValue(y));
+        let T;
+        return d && !p && (T = F`<div class="unique-values-content-list-msg">${a.errors.tooManyUniqueValues}</div>`), F`<div class="container"><calcite-list .label=${a.values} class="popover-unique-list" .filterEnabled=${r.length >= l} .selectionMode=${u ? "multiple" : "single"} .filterPlaceholder=${a.searchValues} @calciteListChange=${(y) => {
+          let m = y.target.selectedItems.map((f) => f.value);
+          !c && n === "date-only" ? m = m?.map((f) => L(f)) : !c && n === "time-only" ? m = m?.map((f) => U(f)) : n && ["date", "oid", "small-integer", "big-integer", "integer", "long"].includes(n) ? m = m?.map((f) => Number.parseInt(f)) : n && ["single", "double"].includes(n) && (m = m?.map((f) => Number.parseFloat(f))), !this.isSameLists(m, this.selectedValues) && (this.selectedValues = m, this.geosceneChange.emit(m));
+        }} @calciteListFilter=${() => {
+          this.dropdownNode.value && (this.dropdownNode.value.disabled = this.listNode.filteredItems.length < 4);
+        }} ${x(this.setListRef)}>${r.length >= l && !p ? this.renderSort(g, v) : null}${M}</calcite-list>${T}</div>`;
+      },
+      error: () => ""
+    });
+  }
+  renderSort(e, s) {
+    const { sortBy: t, _messages: u } = this;
+    return F`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${x(this.dropdownNode)}><calcite-action slot=trigger .label=${u.sortValues} text><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${t === "count" || !h(t)} data-value=count>${u.sortByCount}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "name"} data-value=name>${e || s ? u.sortAscending : u.sortAlphabetical}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "selected"} data-value=selected>${u.sortSelected}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
+  }
+  renderUniqueValue(e) {
+    const { selectedValues: s, initialRender: t, view: u, fieldInfo: p, numberFormatOptions: l } = this, { fieldDomains: a, uniqueValueInfos: c, simpleType: r } = p, d = u && "timeZone" in u && u.timeZone || "system", o = a?.length ? Z(e.value, a) : r === "date" ? ee(e.value, d) : r === "date-only" ? te(e.value) : r === "time-only" ? ie(e.value) : r === "timestamp-offset" ? se(e.value, u) : typeof e.value == "number" ? Q(e.value, l) : e.value, n = s ? r === "date-only" ? s.includes(a?.length ? e.value : L(e.value)) : r === "time-only" ? s.includes(a?.length ? e.value : U(e.value)) : s.includes(e.value) : !1;
+    return z(`list-item_${e.value}`, F`<calcite-list-item .label=${`${o}`} .value=${`${e.value}`} .selected=${n}>${h(e.count) && (c.length > 200 && !t || c.length <= 200) ? F`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
+  }
+}
+P("geoscene-unique-values-list", oe);
+export {
+  oe as GeosceneUniqueValuesList
+};

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

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

package/dist/components/geoscene-unique-values-list/index.js

@@ -0,0 +1,8 @@
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-dropdown";
+import "@geoscene/calcite-components/components/calcite-action";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-dropdown-group";
+import "@geoscene/calcite-components/components/calcite-dropdown-item";
+import "@geoscene/calcite-components/components/calcite-list-item";
+export * from "./customElement.js";

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

@@ -0,0 +1,4 @@
+/// <reference types="@geoscene/core/interfaces.d.ts" />
+
+/** @internal */
+export type SupportedLayer = __geoscene.CatalogFootprintLayer | __geoscene.CatalogLayer | __geoscene.CSVLayer | __geoscene.FeatureLayer | __geoscene.GeoJSONLayer | __geoscene.ImageryLayer | __geoscene.KnowledgeGraphSublayer | __geoscene.OrientedImageryLayer | __geoscene.StreamLayer | __geoscene.SubtypeGroupLayer | __geoscene.SubtypeSublayer | __geoscene.WFSLayer;